Corsair UIBrowse 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
109 items, synced from main.
Foundations1
Components63
- 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.
- 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.
- 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.
- 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.
- Dropdown MenuA menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus.
- 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.
- 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.
- 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.
- Scroll AreaA scrolling box with thin themed scrollbars that keeps native scrolling.
- 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.
- 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.
- 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.
- 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.
Text11
- 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.
- 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.
- 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.
Motion9
- 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.
- 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 ProgressA reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript.
- Smooth ScrollSmooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way.
Creative4
- Animated BorderA border with a light travelling around it, paused off screen.
- Hover RevealA second layer seen through a soft circle that follows the pointer.
- 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.
Blocks11
- 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.
- 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.
- 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.
- PricingA pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch.
- 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.
Hooks3
- 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.