Skip to content
Corsair UI

00Departure· 23°33′S 46°38′W

Forge your interface.

React components, motion and effects you install as source code with the shadcn CLI, checked against Tailwind CSS 3.4 and 4. Take the code. Make it yours.

Explore componentsRead the docs
pnpm dlx shadcn@latest add @corsair-ui/button

No setup: the CLI finds it in the shadcn registry directory. Installation

Items
109
Tailwind
3.4 · 4
Heading
000°
Plan a voyage
Every control here is a Corsair component.
Live

Speed14 kn

01Foundation

Chart the basics first.

The everyday pieces every product rebuilds, made once and made carefully. Scroll the route: every stop is the real component, ready to click.

  1. WPT 01 · Button

    Actions

    Six variants, three sizes and icon sizes, asChild for links, and a loading state that blocks the double click.

    25°46′N 080°11′W

  2. WPT 02 · Input

    Fields

    Inputs, groups with addons, labels and help text. Errors come from aria-invalid, so any form library can drive them.

    23°08′N 082°21′W

    Addons, focus rings and errors come with it.

  3. WPT 03 · Badge

    Status

    Neutral surfaces with the tone on a dot or the icon, so a page full of statuses still reads calmly.

    18°28′N 066°07′W

    On courseSquall aheadReefMooredNew chart

  4. WPT 04 · Card

    Surfaces

    Header, action, content and footer parts that compose instead of configure.

    10°25′N 075°32′W

    Ship's log
    Day 12 · 18°28′N 066°07′W
    Wind steady from the east. Twelve knots, course 247°. All hands well.

  5. WPT 05 · Tooltip

    Hints

    Short labels on hover and on keyboard focus, with motion that stops when you ask it to.

    12°03′S 077°02′W

    Hover or tab to them.

02Forms

Assemble a form as you read.

Field for layout, FormField for react-hook-form, and inputs that all speak aria-invalid. Keep scrolling: each step adds the next piece.

  1. Log 01 · Label and input

    FormField lays out the label, the control and its help text, and wires the id and the ARIA attributes for you.

  2. Log 02 · Choices

    A Select for the port of call. Same field around it, same keyboard support as a native select.

  3. Log 03 · Dates

    The range picker opens a calendar in a popover, closes on the second pick and submits yyyy-mm-dd.

  4. Log 04 · Validation

    Submit it empty. Errors ease in under their field and are announced, and the fields point at them.

Ship's articles01 / 04

charter-form.tsx

<FormField
  control={form.control}
  name="captain"
  label="Captain"
  rules={{ required: "Every ship needs a captain." }}
  render={({ field }) => <Input {...field} />}
/>

03Motion

Movement with a reason.

Fewer, better animations: transforms and opacity, IntersectionObserver and CSS scroll-driven animations. No animation library, no scroll listeners.

Things arrive when you reach them, lean toward your hand when you reach for them and drift at their own pace as you pass. Ask your system for less motion and all of it holds still.

Salvador04:10berth 2
Cartagena07:45berth 5
Havana11:20anchored
Nassau15:05berth 1

Reveal

IntersectionObserver

Magnetic

One frame, no re-render

Parallax

CSS only, 0 KB of JS

04Creative

Effects, with restraint.

For the moments that should feel special: light that follows the pointer, borders that travel, auroras and ink that draws itself. Every one of them rests off screen.

Aurora · Spotlight

Northern lights over the chart table.

Three radial gradients drifting on transforms, and a light that follows your cursor across the card and along its edge.

Signature

Ink that draws itself, stroke by stroke, when it comes into view.

Animated border

A light that sails the edge.

One rotating layer on the compositor, paused while it is off screen.

05Registry

Take the code. Make it yours.

Corsair is a shadcn registry. One command writes real files into your project: no package to wrap, no black box to fight.

  1. 01Add the theme, once. The CLI finds the registry in the shadcn directory.
    pnpm dlx shadcn@latest add @corsair-ui/theme
  2. 02Add what you need.
    pnpm dlx shadcn@latest add @corsair-ui/date-picker
  3. 03Edit it like any other file. See what each install writes.
Ship's logadd @corsair-ui/date-picker

01resolve@corsair-ui/utils

02resolve@corsair-ui/button

03resolve@corsair-ui/calendar

04resolve@corsair-ui/popover

05writelib/utils.ts

06writecomponents/ui/button.tsx

07writecomponents/ui/calendar.tsx

08writecomponents/ui/popover.tsx

09writecomponents/ui/date-picker.tsx

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

✓ 5 files you own · 7 packages · 0 black boxes

06Set sail

Chart your own course.

Start with the theme and a button. Take on the rest when you need it, and make every file your own.

Get startedExplore the arsenal
pnpm dlx shadcn@latest add @corsair-ui/theme