Browse the docs
Get started
Introduction
Corsair UI is an arsenal of React components, motion and effects that you install as source code with the shadcn CLI. You take the code, you make it yours.
Yours to change
Items install as source files in your project. There is no package to upgrade around and no black box: read the code, change it, keep it.
Tailwind 3.4 and 4
Every item is installed into a Tailwind 3.4 project and a Tailwind 4 project in CI, then typechecked and compiled, before it ships.
Accessible by default
Radix primitives for behaviour, strict accessibility linting on every file, visible focus, and motion that stops when someone asks it to.
Motion without the weight
Transforms and opacity, IntersectionObserver and CSS scroll-driven animations. No animation library and no scroll listeners.
How it works
- 01Add the theme, once. There is no setup first: the namespace is in the shadcn registry directory.
pnpm dlx shadcn@latest add @corsair-ui/theme - 02Then any item:
pnpm dlx shadcn@latest add @corsair-ui/button - 03Edit the files in
components/uilike the rest of your code. The installation guide covers the details, and Registry explains what each install writes.
Everything in it
148 items, synced from main.
Foundations6
- ThemeCorsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring to apply your brand.
- Theme: AmberThe Corsair theme on a stone base with an amber primary and square corners. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
- Theme: BlueThe Corsair theme on a slate base with a blue primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
- Theme: EmeraldThe Corsair theme on a zinc base with an emerald primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
- Theme: RoseThe Corsair theme on a stone base with a rose primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
- Theme: VioletThe Corsair theme on a zinc base with a violet primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
Components78
- AccordionStacked sections that open and close under their headings, one or several at a time, with a height animation.
- AlertCallout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon.
- Alert DialogModal that asks the user to confirm or cancel before an action, with action and cancel buttons.
- Area ChartOne or more series as gradient-filled areas, stacked or overlapping, with a legend and a keyboard slider over the points.
- AvatarA round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group.
- BadgeShort status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot.
- Bar ChartOne series as vertical or horizontal bars that grow in on first view, with a keyboard slider over the bars.
- Bars SpinnerTwelve bars around a hub fading in turn, announced as Loading. No JavaScript.
- BreadcrumbThe trail of links from the top of a site to the current page, with separators and an ellipsis.
- ButtonTriggers an action. Variants default, secondary, outline, ghost, destructive and link; sizes sm, default, lg and three square icon sizes. Supports asChild and a loading state.
- CalendarMonth grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker.
- CardContainer with header, title, description, action, content and footer parts.
- CarouselSlides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look.
- CheckboxCheckbox with checked, unchecked and indeterminate states.
- Code BlockA block of code with an optional caption, a language label and a copy button.
- CollapsibleA region that a trigger button shows and hides, with a height animation.
- Color SwatchesPick one colour from a row of swatches: a radio group with arrow keys and form support.
- ComboboxA select with a search box, for long lists of options.
- CommandSearchable list navigated with the arrow keys; the base for comboboxes and command menus.
- Context MenuA menu of actions for an area of the page that opens on right click or long press, with checkbox and radio items, labels, shortcuts and submenus.
- Copy ButtonAn icon button that copies a value and swaps to a check mark, announcing it to screen readers.
- Corner FrameA box with bracket marks on its corners, in any size, thickness, colour and inset.
- Dash ButtonA pill button whose fill gives way to a dashed outline that marches on hover.
- Data TableA table with sortable headers, a text filter, pagination and row selection, built on TanStack Table v9.
- Date PickerDatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range.
- DialogModal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts.
- DockA floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling.
- Donut ChartParts of a whole as a ring with the total in the middle and a keyboard-navigable legend of values and shares.
- DrawerA bottom sheet dialog for phones that can also be dragged down to close.
- Dropdown MenuA menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus.
- DropzoneA file drop area on a native file input that checks type, size and count, and lists the chosen files.
- Empty StateWhat a list, table or page shows when it has nothing in it yet, with an icon, title, description and actions.
- FieldLayout for a control with its label, description and error, plus fieldset and group helpers. Independent of any form library.
- Form Field (react-hook-form)FormField: a react-hook-form Controller laid out with Field, with the id, label and ARIA wiring done for you.
- Hover CardA preview card that appears while a link is hovered or focused, for supplementary content.
- InputSingle-line text control. Its error state comes from aria-invalid, so any form library can drive it.
- Input GroupAn input with icons, text or buttons attached on either side.
- Input OTPOne-time code input drawn as separate slots, with paste and autofill support.
- KbdA key or key combination shown as a small keycap, alone or in a group.
- LabelAccessible name for a form control.
- Line ChartOne series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers.
- Nav LinkA navigation link that marks the current page with aria-current and data-active. Supports asChild for router links.
- Navigation MenuSite navigation with links and triggers that open panels of links in a shared, animated viewport.
- Number InputNumber field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern.
- PaginationPage links with previous and next, an ellipsis, and a helper that works out which page numbers to show.
- Password InputPassword field with a button that shows what was typed.
- PopoverFloating panel anchored to a trigger, with header, title and description parts.
- ProgressA progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown.
- QR CodeA crisp SVG QR code in dots, rounded or square modules. Renders on the server, and can draw itself in.
- Radio GroupA set of options where exactly one can be selected.
- RatingStars for giving a score as a radio group, or for showing one read-only with fractional fills.
- ResizablePanels resized by dragging or with the keyboard, side by side or stacked.
- Scroll AreaA scrolling box with thin themed scrollbars that keeps native scrolling.
- Segmented ControlA switch between two or more options with one thumb that slides to the active one, in three sizes. Never empty.
- SelectPick one option from a list, with groups, labels and separators.
- SeparatorHorizontal or vertical divider.
- SheetDialog that slides in from any edge of the screen, for menus, filters and side panels.
- SidebarAn application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut.
- Site HeaderA sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls.
- SkeletonPlaceholder shape shown while content loads.
- SliderPick a number or a range by dragging or with the arrow keys, horizontal or vertical.
- SpinnerAnimated status indicator for work in progress, announced as Loading.
- Spotify CardA track card with cover art, a link to Spotify and a preview clip that spins a record while it plays.
- StatKey figures as a description list: label, value and a caption with an optional trend arrow.
- StepperThe steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical.
- StoryA 1080 × 1920 story put together from parts (header, eyebrow, title, grid of tiles, list of rows, highlight, image, call to action), laid out inside the safe area, with themes, patterns and a background photo. Drawn by Satori: render it with story-frame or renderStoryPng().
- Story FrameA 9:16 story preview that is the exported PNG itself, with Share (the phone's share sheet, Instagram included), Download and Copy link, and the safe area the apps draw over.
- SwitchOn/off control for settings that apply immediately.
- TableA data table on native table elements, with a scroll container, selected rows and sortable column headers.
- TabsSections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical.
- TextareaMulti-line text control with the same states as Input.
- TimelineA vertical list of events with a coloured dot for each status and a line joining them.
- ToastBrief notifications shown with a toast() call and a Toaster mounted once, with variants, an optional action, swipe to dismiss and screen reader announcements.
- ToggleA button that stays pressed, in default and outline variants and three sizes.
- Toggle GroupA set of toggles with single or multiple selection, joined or spaced apart.
- TooltipA short label shown on hover and keyboard focus.
- Tweet CardA post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one.
- YouTube EmbedA YouTube video that costs one poster image until it is played, with player controls through its ref.
Text13
- Blur TextText that comes into focus one character at a time, and can blur back out.
- Dissolve TextWords or characters surfacing at scattered moments, the same on server and client.
- Flip TextKinetic type in 3D: characters or words turning into place around their horizontal axis, one after another.
- Highlight TextA marker that slides in behind a phrase, or a hand-drawn line drawn under it.
- Number TickerA number that counts up to its value when it comes into view, formatted for the locale.
- Roll TextCharacters that roll up to a copy of themselves on hover or keyboard focus.
- Scramble TextText that decodes itself: noise sweeps across, then each character locks in.
- Shimmer TextA band of light sweeping across text now and then, paused off screen.
- Slide TextWords, characters or lines rising into place from below their own baseline.
- Split FlapA split-flap board: when the value changes, only the characters that changed flip, like a departure board.
- Text RevealReveals text word by word, when it comes into view or tied to the scroll position.
- Text SignatureWrites any text in any font as a signature: outlines drawn by the pen, then inked.
- Wave TextBands of colour washing through text like a swell, on one CSS animation.
Motion15
- Custom CursorA dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels.
- MagneticPulls its content toward the mouse while hovered and springs it back on leave.
- MarqueeContent scrolling in a seamless loop, pausing on focus and off screen, and draggable by the pointer.
- ParallaxDrifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript.
- ParticlesDots drifting slowly across a surface, laid out from a seed and moved with CSS alone.
- PreloaderA full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out.
- RevealFades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript.
- Scroll BackgroundA background that blends from one colour to the next as you scroll, with CSS scroll-driven animations and no JavaScript.
- Scroll ProgressA reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript.
- Scroll SceneA scrollytelling scene: a stage pinned beside steps, crossfading to the slide of the step on screen, with a 0 to 1 scroll progress variable for scrubbing.
- Smooth ScrollSmooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way.
- StampA rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot.
- Tilt ScrollContent that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript.
- Wave RatingThe rating, animated: sweeping a finger, pen or mouse across the stars lifts them in a wave that crests under the pointer, a tip shows the score, and letting go pops the chosen star. Same props and radio group as rating.
- Wipe TransitionSwitches content behind a band that sweeps across it, swapping while covered, with a crossfade for phones and reduced motion.
Creative8
- Animated BorderA border with a light travelling around it, paused off screen.
- Browser FrameA browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions.
- Flip CardA card with two faces that turns over in 3D on hover, from a trigger, or from a prop.
- Hover RevealA second layer seen through a soft circle that follows the pointer.
- Path BeamA beam of light travelling along the paths of a flow diagram, one after another, on view, with the scroll or from your own progress.
- Phone FrameA generic phone drawn in CSS around a screenshot or any content, with an island, a notch or no cut-out, that scales with its width.
- SignatureDraws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll.
- SpotlightA soft light that follows the pointer across a surface and along its edge.
Backgrounds5
- AuroraSlow, soft light drifting behind its content, from three radial gradients.
- GrainFilm grain over a surface, from a tile of SVG noise, with an optional stepped jitter.
- Light RaysSoft beams of light falling from above, from a small WebGL2 shader.
- TopographyContour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader.
- Warp GradientA liquid field of colour carried along by layered noise, from one WebGL2 shader.
Blocks16
- Call to ActionA closing band with a title, a description and one or two actions.
- Contact FormA contact section with a header, contact details and a validated message form that reports pending, success and error states.
- DashboardAn application page with a collapsible sidebar, a header, stat cards, a line chart and a recent-activity table.
- FAQA frequently asked questions section with a header and the answers in an accordion, split or stacked.
- Feature GridA grid of features with an icon, a title and a description under a centred section header.
- HeroThe opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot.
- Login FormA centred sign-in card with email and password fields, a remember-me checkbox, optional sign-in providers and pending, success and error states.
- Logo CloudCustomer or partner logos in a grid or a scrolling marquee under a small title.
- NewsletterA compact sign-up band with an inline email form that reports pending, success and error states.
- Not FoundA 404 page section with a large decorative error code, a page heading, a description, an optional search slot and actions.
- PricingA pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch.
- SettingsAn account settings page with tabs for a profile form, a password change and delete-account dialog, and notification switches.
- Signup FormA centred sign-up card with name, email and password fields, a required terms checkbox, optional sign-up providers and pending, success and error states.
- Site FooterA page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links.
- StatsA row of key figures that count up when they scroll into view, under a centred section header.
- TestimonialsA section of customer quotes with names, roles and avatars, in a masonry or grid layout.
Hooks4
- useEntranceWhen a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen.
- useInViewWhether an element is in the viewport, from IntersectionObserver, with once, margin and amount options.
- useMediaQuerySubscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch.
- useScrollSpyThe id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two.
Utilities3
- getSpotifyTrackTitle, artist, cover and preview clip for a Spotify link, read on the server from the public embed page.
- Story ExportTurns stories into images for Instagram, WhatsApp and TikTok: renderStoryPng() draws JSX to a 1080 × 1920 PNG in the browser with Satori, shareStory() opens the share sheet with it, plus downloadStory(), loadFont() and the safe area the apps draw over.
- UtilsThe cn() helper: merges class names and resolves conflicting Tailwind utilities.