Skip to content
Corsair UI

Themes

Make it yours

Every component reads the same few variables. Choose a base, a primary colour and a radius, check the result in light and dark mode, then copy the CSS. More on the variables in Theme.

Start from
Base
Radius0.625rem

Contrast · all AA

  • Text (light)20.17
  • Muted text (light)5.05
  • Muted text on muted (light)4.61
  • Primary button (light)4.94
  • Destructive button (light)4.83
  • Card text (light)20.17
  • Text (dark)19.28
  • Muted text (dark)7.87
  • Muted text on muted (dark)5.71
  • Primary button (dark)5.48
  • Destructive button (dark)5.26
  • Card text (dark)17.06

Preview

Create a project
Deploy a new project in one click.
Muted text on the background, the way captions and hints look.
NewDraftv2PaidFailed

Use it

This is the theme-blue preset: one command installs the theme with these colours.

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

Or paste the variables yourself:

:root {
  --radius: 0.625rem;
  --background: #ffffff;
  --foreground: #020617;
  --card: #ffffff;
  --card-foreground: #020617;
  --popover: #ffffff;
  --popover-foreground: #020617;
  --primary: #2563eb;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #607086;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --field: #ffffff;
  --ring: #2563eb;
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #0f172a;
  --card-foreground: #f8fafc;
  --popover: #0f172a;
  --popover-foreground: #f8fafc;
  --primary: #3b82f6;
  --primary-foreground: #020617;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --destructive: #ef4444;
  --destructive-foreground: #0a0a0a;
  --success: #4ade80;
  --warning: #fbbf24;
  --border: rgb(255 255 255 / 0.1);
  --input: rgb(255 255 255 / 0.15);
  --field: rgb(255 255 255 / 0.05);
  --ring: #3b82f6;
}