Customization

Make every component your own

Because you own the source code of every component, you have complete freedom to customize them. There are several approaches depending on how deep you need to go.

CSS Variables

All components use CSS custom properties defined in your global stylesheet. Changing these variables updates every component at once.

css

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 222 47% 11%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --radius: 0.5rem;
}

Tip

Override only the variables you need — everything else inherits from the defaults.

Tailwind Classes

Every component accepts a className prop. Use it to override or extend styles using Tailwind utility classes.

tsx

// Override background and text color
<Button className=class="text-green-500">"bg-indigo-600 hover:bg-indigo-700 text-white">
  Custom Button
</Button>

// Add extra margin
<Card className=class="text-green-500">"mt-8 shadow-xl">
  ...
</Card>

Adding Variants

Components built with class-variance-authority (CVA) make it easy to add new variants without touching existing ones.

tsx

import { cva } from class="text-green-500">"class-variance-authority"

const buttonVariants = cva(class="text-green-500">"...", {
  variants: {
    variant: {
      default: class="text-green-500">"bg-primary text-primary-foreground",
      destructive: class="text-green-500">"bg-destructive text-destructive-foreground",
      // Add your own variant
      brand: class="text-green-500">"bg-indigo-600 hover:bg-indigo-700 text-white",
    },
  },
})

Dark Mode

All components support dark mode out of the box via the .dark class on the root element. Add dark-mode specific CSS variable overrides in your stylesheet:

css

.dark {
  --background: 222 47% 6%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222 47% 11%;
  --muted: 217 33% 17%;
  --border: 217 33% 17%;
}

Fonts

Components use the CSS variable --font-sans for text. Set it in your layout to apply your chosen typeface globally.

tsx

import { Inter } from class="text-green-500">"next/font/google"

const inter = Inter({ subsets: [class="text-green-500">"latin"] })

// In your root layout:
<html className={inter.variable}>
  ...
</html>

// In globals.css:
:root {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

Note

See the Theming guide for a complete list of design tokens.