FoundationsNo. 01 of 148

Theme

Corsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring to apply your brand.

Installation

pnpm dlx shadcn@latest add @corsair-ui/theme

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

Examples

Colours

Semantic tokens in dark mode. Light mode uses the same names.

Aa
--background
Aa
--card
Aa
--popover
Aa
--primary
Aa
--secondary
Aa
--muted
Aa
--accent
Aa
--destructive
--success
--warning
--border
--input
--field
--ring

Radius

Derived from --radius (0.625rem).

rounded-sm

rounded-md

rounded-lg

rounded-xl

Branding

Override three variables to apply a project's colour.

.dark {
  --primary: #ff3131;
  --primary-foreground: #0f0d0d;
  --ring: #ff3131;
}

Styling

Restyle it in your project: className on each part, the theme variables, and these attributes with arbitrary variants.

The Themes page (/themes) builds these variables for another base, brand colour and radius, checks the contrast and gives the CSS to paste after the theme.
Presets install the theme with a palette in one command: theme-blue, theme-violet, theme-rose, theme-emerald and theme-amber.

Accessibility

Foreground and background pairs are picked for contrast in both light and dark mode.
Focus rings use --ring on every interactive component.

Compatibility

Tailwind CSS: 3.4 and 4, both checked in CI
React: 19
Rendering: Works in server components