Skip to content
Corsair UI
Browse the docs

Get started

Registry

Take the code. Make it yours. Corsair is a shadcn registry: JSON files that describe each item, its source and what it depends on. The CLI reads them and writes real files into your project.

Where it lives

The source is the public KevinGirelli/corsair-ui repository. Every merge to its main branch builds the registry and publishes it with GitHub Pages, at the URL the @corsair-ui namespace points to:

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

The namespace is listed in the shadcn registry directory, so the CLI resolves it without any setup and writes it to components.json the first time you install from it.

It holds 109 items today: 1 foundations, 63 components, 11 text, 9 motion, 4 creative, 5 backgrounds, 11 blocks, 3 hooks, 2 utilities.

What an install writes

Adding an item also adds the Corsair items it builds on, and each item's npm packages. Here is everything date-picker brings:

pnpm dlx shadcn@latest add @corsair-ui/date-picker

npm packages

  • @daypicker/react
  • @radix-ui/react-popover
  • @radix-ui/react-slot
  • class-variance-authority
  • clsx
  • lucide-react
  • tailwind-merge

Items that need CSS, such as keyframes or the theme's colour variables, also update your stylesheet, and Tailwind 3 projects get the same values in tailwind.config.

Look before you install

Print an item's full payload, source included:

pnpm dlx shadcn@latest view @corsair-ui/date-picker

Or preview what would change in your project without writing anything:

pnpm dlx shadcn@latest add @corsair-ui/date-picker --dry-run

After it lands

The files are yours. Rename props, change the classes, delete what you do not use. To see what changed upstream later, run the add command again with --diff and pick what to keep.

Every item page lists what it adds and links to its source at the synced commit, so you always know what you are taking on.