Aurora DS - React Components Library
npm install @aurora-ds/components@aurora-ds/theme v3 - Powerful theming system
bash
yarn add @aurora-ds/components @aurora-ds/theme react react-dom
`
Quick Start
`tsx
import { ThemeProvider } from '@aurora-ds/theme'
import { defaultTheme, Button } from '@aurora-ds/components'
function App() {
return (
)
}
`
That's it! 🎉
🎨 Customization
$3
You have two options to customize the theme:
#### Option A: Using spread operator (simple)
`tsx
import { defaultTheme } from '@aurora-ds/components'
import { colors } from '@aurora-ds/theme'
const myTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: colors.purple[600], // Change primary color
success: colors.teal[600], // Change success color
},
spacing: {
...defaultTheme.spacing,
lg: '2rem', // Change large spacing
},
radius: {
...defaultTheme.radius,
md: '1rem', // Change medium radius
}
}
`
#### Option B: Using createTheme (type-safe)
`tsx
import { createTheme, colors } from '@aurora-ds/theme'
import { defaultTheme } from '@aurora-ds/components'
const myTheme = createTheme({
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: colors.purple[600],
success: colors.teal[600],
}
})
`
Both approaches work! createTheme provides additional type validation.
$3
If you need tokens that don't exist in defaultTheme (for very specific use cases):
Step 1: Create your theme types
`typescript
// src/theme/theme.types.ts
import type { Theme as BaseTheme } from '@aurora-ds/components'
export interface Theme extends BaseTheme {
colors: BaseTheme['colors'] & {
brand: string // New custom token
custom: string // New custom token
}
customSpacing: { // Entirely new category
hero: string
section: string
}
}
`
Step 2: Create module augmentation
`typescript
// src/theme/theme.module.ts
import type { Theme } from './theme.types'
declare module '@aurora-ds/theme' {
interface ThemeRegistry {
theme: Theme
}
}
`
Step 3: Create your theme with createTheme
`typescript
// src/theme/theme.ts
import './theme.module'
import { createTheme, colors } from '@aurora-ds/theme'
import { defaultTheme } from '@aurora-ds/components'
export const myTheme = createTheme({
...defaultTheme,
colors: {
...defaultTheme.colors,
brand: colors.purple[600], // Your custom token
custom: colors.pink[500], // Your custom token
},
customSpacing: { // Your custom category
hero: '10rem',
section: '5rem',
}
} as Theme)
`
Step 4: Use it
`typescript
// src/App.tsx
import { myTheme } from './theme/theme'
`
Now you get autocomplete on your custom tokens! ✅
> Note: Most projects won't need this. The default theme already includes common tokens like highlight, accent, and link.
$3
Create multiple theme variants:
`typescript
import { createTheme, colors } from '@aurora-ds/theme'
import { defaultTheme } from '@aurora-ds/components'
// Light theme (use default)
export const lightTheme = defaultTheme
// Dark theme with createTheme
export const darkTheme = createTheme({
...defaultTheme,
colors: {
...defaultTheme.colors,
background: colors.slate[950],
surface: colors.slate[900],
text: colors.slate[50],
primary: colors.indigo[400],
secondary: colors.slate[800],
border: colors.slate[800],
// ... other dark mode colors
}
})
// In your app
const [isDark, setIsDark] = useState(false)
`
📦 Available Tokens
The defaultTheme includes these token categories:
- colors: primary, secondary, error, success, warning, info, highlight, accent, link, text, background, etc.
- spacing: none, 2xs (2px), xs (4px), sm (8px), md (16px), lg (24px), xl (32px), etc.
- radius: none, xs (2px), sm (4px), md (6px), lg (8px), xl (12px), 2xl (16px), full
- fontSize: 2xs (10px), xs (12px), sm (14px), md (16px), lg (20px), xl (24px), etc.
- fontWeight: light (300), regular (400), medium (500), semibold (600), bold (700)
- shadows, transition, breakpoints, zIndex, etc.
💡 See all values in src/theme/values/`