Theming

Components are styled with shadcn's semantic classes, like bg-primary and text-muted-foreground. Their colors come from CSS variables that ThemeProvider sets for light and dark mode, the same variables npx shadcn init writes to your CSS.

The base color sets the neutrals: backgrounds, borders, muted text.

A theme color is layered over the base color: primary, charts and the sidebar's primary.

Beyond shadcn's palette, info, success, warning and error, each with a -foreground, as in daisyUI. They're styled exactly like shadcn's destructive: white text on the color, with the color at 60% in dark mode. error is --destructive, so the two are identical. The shades are Tailwind's, picked so white text has at least 4.5:1 contrast in both modes. Use them as classes (bg-success, text-warning) or through the components' color prop.

Button, Badge and Alert take daisyUI's soft (a tint of the color) and dash (a dashed outline) variants, in any of the colors: primary, info, success, warning and error. The color also applies to default, outline, ghost and link. Without a color, soft and dash use the foreground. Card takes variant="dash" too: a dashed border without the shadow. Override the status colors with cssVars, like any other variable.

--radius sets the corner radius the components derive rounded-sm to rounded-4xl from.

Pass variables in shadcn's registry shape, { theme, light, dark }, without the leading --. Use any CSS color, including oklch():

The Create page lets you pick a base color, theme, chart colors and radius, and gives you the provider code.