Get started

Installation

Corsair works in any React 19 project with Tailwind CSS 3.4 or 4 that the shadcn CLI can set up: Next.js, Vite, React Router and the rest.

1. 01Set up the project

   If the project has no components.json yet, let the CLI create it. It also installs the animation utilities the overlays use: tw-animate-css for Tailwind 4, tailwindcss-animate for Tailwind 3.4.

   $pnpm dlx shadcn@latest init

2. 02Add the theme

   Colours, radius and base styles for light and dark mode, the same tokens as the Figma library. Add it once: components never reinstall it, so your brand colours stay put.

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

   There is nothing to configure first: @corsair-ui is listed in the shadcn registry directory, so the CLI finds it and adds it to components.json on the first install:

   "registries": {
     "@corsair-ui": "https://kevingirelli.github.io/corsair-ui/r/{name}.json"
   }

   Dark mode follows the dark class on <html>. To brand it, override three variables:

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

3. 03Add what you need

   Each item arrives with the Corsair items and npm packages it depends on.

   $pnpm dlx shadcn@latest add @corsair-ui/button @corsair-ui/field

   See everything that is available from the terminal:

   $pnpm dlx shadcn@latest list @corsair-ui

4. 04Pin a release (optional)

   @corsair-ui/<item> always serves the latest code. To install exactly what a release shipped, use the GitHub address with the tag:

   $pnpm dlx shadcn@latest add KevinGirelli/corsair-ui/button#v0.2.0

   More on what the CLI writes, and how to inspect it first, in Registry.