Theming

Dark mode

Components use Tailwind's dark: variant for their neutral surfaces, so they follow whatever dark-mode strategy your project configures. With the shadcn convention (a .dark class on <html>):

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

Without a custom variant, Tailwind v4 follows the operating system preference.

Accent colours

Most components take an accent prop (default #FF7448). Pass any CSS colour — including your own design token:

<SpotlightCard accent="var(--color-primary)">…</SpotlightCard>

Restyling

Use className for layout and surface adjustments. For deeper changes, edit the file — it is yours. The class lists are kept flat and readable for exactly this reason. The Customisation guide covers props and presets.