Skip to content
Corsair UI
Browse the docs

FoundationsNo. 03 of 145

Theme: Blue

The Corsair theme on a slate base with a blue primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.

Installation

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

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.

Also adds
theme

Examples

Light and dark

The preset's variables, applied to a few components.

light

New

Muted text on the background.

dark

New

Muted text on the background.

Styling

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

  • It installs the theme first, then sets these colours and the radius. To change a colour afterwards, edit the variable in your global CSS, or build a new set on the Themes page (/themes).

Accessibility

  • Every text pair (text, muted text, primary and destructive buttons, cards) reaches WCAG AA, 4.5:1, in light and dark mode.

Compatibility

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