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.

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
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;
}
```
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
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.

01Set up the project