---
name: "@corsair-ui"
slug: "corsair-ui"
description: "Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds."
category: "Animated components"
tags: ["animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "KevinGirelli"
website: "https://corsairui.vercel.app"
github: "https://github.com/KevinGirelli/corsair-ui"
registry: "https://kevingirelli.github.io/corsair-ui/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 145
generated_at: "2026-10-10T06:32:55.998Z"
---

# @corsair-ui

Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.

## Links

- Website: https://corsairui.vercel.app
- GitHub: https://github.com/KevinGirelli/corsair-ui
- Registry JSON: https://kevingirelli.github.io/corsair-ui/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/corsair-ui
- This file: https://sh4dcn.vercel.app/md/corsair-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/registry.json
pnpm dlx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/registry.json
bunx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/registry.json
# clone the source repo
git clone https://github.com/KevinGirelli/corsair-ui.git
# fetch the raw registry index
curl -s https://kevingirelli.github.io/corsair-ui/r/registry.json
```

## Components (145)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | Corsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring … | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme.json` |
| theme-blue | registry:theme | The 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme-blue.json` |
| theme-violet | registry:theme | The 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme-violet.json` |
| theme-rose | registry:theme | The 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme-rose.json` |
| theme-emerald | registry:theme | The 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme-emerald.json` |
| theme-amber | registry:theme | The 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 W… | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/theme-amber.json` |
| utils | registry:lib | The cn() helper: merges class names and resolves conflicting Tailwind utilities. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/utils.json` |
| spotify-track | registry:lib | Title, artist, cover and preview clip for a Spotify link, read on the server from the public embed page. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/spotify-track.json` |
| use-media-query | registry:hook | Subscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/use-media-query.json` |
| use-in-view | registry:hook | Whether an element is in the viewport, from IntersectionObserver, with once, margin and amount options. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/use-in-view.json` |
| use-entrance | registry:hook | When a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/use-entrance.json` |
| use-scroll-spy | registry:hook | The id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/use-scroll-spy.json` |
| button | registry:ui | Triggers an action. Variants default, secondary, outline, ghost, destructive and link; sizes sm, default, lg and three square icon sizes. Supports asChild and … | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/button.json` |
| spinner | registry:ui | Animated status indicator for work in progress, announced as Loading. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/spinner.json` |
| badge | registry:ui | Short status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/badge.json` |
| label | registry:ui | Accessible name for a form control. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/label.json` |
| input | registry:ui | Single-line text control. Its error state comes from aria-invalid, so any form library can drive it. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/input.json` |
| textarea | registry:ui | Multi-line text control with the same states as Input. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/textarea.json` |
| input-group | registry:ui | An input with icons, text or buttons attached on either side. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/input-group.json` |
| field | registry:ui | Layout for a control with its label, description and error, plus fieldset and group helpers. Independent of any form library. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/field.json` |
| form | registry:ui | FormField: a react-hook-form Controller laid out with Field, with the id, label and ARIA wiring done for you. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/form.json` |
| checkbox | registry:ui | Checkbox with checked, unchecked and indeterminate states. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/checkbox.json` |
| radio-group | registry:ui | A set of options where exactly one can be selected. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/radio-group.json` |
| switch | registry:ui | On/off control for settings that apply immediately. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/switch.json` |
| select | registry:ui | Pick one option from a list, with groups, labels and separators. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/select.json` |
| separator | registry:ui | Horizontal or vertical divider. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/separator.json` |
| card | registry:ui | Container with header, title, description, action, content and footer parts. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/card.json` |
| flip-card | registry:ui | A card with two faces that turns over in 3D on hover, from a trigger, or from a prop. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/flip-card.json` |
| stamp | registry:ui | A rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/stamp.json` |
| alert | registry:ui | Callout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/alert.json` |
| skeleton | registry:ui | Placeholder shape shown while content loads. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/skeleton.json` |
| popover | registry:ui | Floating panel anchored to a trigger, with header, title and description parts. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/popover.json` |
| command | registry:ui | Searchable list navigated with the arrow keys; the base for comboboxes and command menus. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/command.json` |
| calendar | registry:ui | Month grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/calendar.json` |
| date-picker | registry:ui | DatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/date-picker.json` |
| combobox | registry:ui | A select with a search box, for long lists of options. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/combobox.json` |
| input-otp | registry:ui | One-time code input drawn as separate slots, with paste and autofill support. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/input-otp.json` |
| slider | registry:ui | Pick a number or a range by dragging or with the arrow keys, horizontal or vertical. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/slider.json` |
| toggle | registry:ui | A button that stays pressed, in default and outline variants and three sizes. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/toggle.json` |
| toggle-group | registry:ui | A set of toggles with single or multiple selection, joined or spaced apart. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/toggle-group.json` |
| segmented-control | registry:ui | A switch between two or more options with one thumb that slides to the active one, in three sizes. Never empty. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/segmented-control.json` |
| number-input | registry:ui | Number field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/number-input.json` |
| password-input | registry:ui | Password field with a button that shows what was typed. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/password-input.json` |
| tooltip | registry:ui | A short label shown on hover and keyboard focus. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/tooltip.json` |
| reveal | registry:ui | Fades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/reveal.json` |
| text-reveal | registry:ui | Reveals text word by word, when it comes into view or tied to the scroll position. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/text-reveal.json` |
| magnetic | registry:ui | Pulls its content toward the mouse while hovered and springs it back on leave. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/magnetic.json` |
| parallax | registry:ui | Drifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/parallax.json` |
| tilt-scroll | registry:ui | Content that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/tilt-scroll.json` |
| spotlight | registry:ui | A soft light that follows the pointer across a surface and along its edge. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/spotlight.json` |
| animated-border | registry:ui | A border with a light travelling around it, paused off screen. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/animated-border.json` |
| aurora | registry:ui | Slow, soft light drifting behind its content, from three radial gradients. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/aurora.json` |
| signature | registry:ui | Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/signature.json` |
| path-beam | registry:ui | A beam of light travelling along the paths of a flow diagram, one after another, on view, with the scroll or from your own progress. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/path-beam.json` |
| copy-button | registry:ui | An icon button that copies a value and swaps to a check mark, announcing it to screen readers. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/copy-button.json` |
| dash-button | registry:ui | A pill button whose fill gives way to a dashed outline that marches on hover. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dash-button.json` |
| color-swatches | registry:ui | Pick one colour from a row of swatches: a radio group with arrow keys and form support. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/color-swatches.json` |
| bars-spinner | registry:ui | Twelve bars around a hub fading in turn, announced as Loading. No JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/bars-spinner.json` |
| shimmer-text | registry:ui | A band of light sweeping across text now and then, paused off screen. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/shimmer-text.json` |
| blur-text | registry:ui | Text that comes into focus one character at a time, and can blur back out. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/blur-text.json` |
| slide-text | registry:ui | Words, characters or lines rising into place from below their own baseline. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/slide-text.json` |
| flip-text | registry:ui | Kinetic type in 3D: characters or words turning into place around their horizontal axis, one after another. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/flip-text.json` |
| split-flap | registry:ui | A split-flap board: when the value changes, only the characters that changed flip, like a departure board. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/split-flap.json` |
| dissolve-text | registry:ui | Words or characters surfacing at scattered moments, the same on server and client. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dissolve-text.json` |
| highlight-text | registry:ui | A marker that slides in behind a phrase, or a hand-drawn line drawn under it. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/highlight-text.json` |
| scramble-text | registry:ui | Text that decodes itself: noise sweeps across, then each character locks in. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/scramble-text.json` |
| wave-text | registry:ui | Bands of colour washing through text like a swell, on one CSS animation. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/wave-text.json` |
| text-signature | registry:ui | Writes any text in any font as a signature: outlines drawn by the pen, then inked. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/text-signature.json` |
| marquee | registry:ui | Content scrolling in a seamless loop, pausing on focus and off screen, and draggable by the pointer. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/marquee.json` |
| line-chart | registry:ui | One series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/line-chart.json` |
| qr-code | registry:ui | A crisp SVG QR code in dots, rounded or square modules. Renders on the server, and can draw itself in. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/qr-code.json` |
| tweet-card | registry:ui | A post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/tweet-card.json` |
| spotify-card | registry:ui | A track card with cover art, a link to Spotify and a preview clip that spins a record while it plays. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/spotify-card.json` |
| light-rays | registry:ui | Soft beams of light falling from above, from a small WebGL2 shader. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/light-rays.json` |
| warp-gradient | registry:ui | A liquid field of colour carried along by layered noise, from one WebGL2 shader. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/warp-gradient.json` |
| dialog | registry:ui | Modal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dialog.json` |
| alert-dialog | registry:ui | Modal that asks the user to confirm or cancel before an action, with action and cancel buttons. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/alert-dialog.json` |
| sheet | registry:ui | Dialog that slides in from any edge of the screen, for menus, filters and side panels. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/sheet.json` |
| toast | registry:ui | Brief notifications shown with a toast() call and a Toaster mounted once, with variants, an optional action, swipe to dismiss and screen reader announcements. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/toast.json` |
| nav-link | registry:ui | A navigation link that marks the current page with aria-current and data-active. Supports asChild for router links. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/nav-link.json` |
| site-header | registry:ui | A sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/site-header.json` |
| dock | registry:ui | A floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dock.json` |
| tabs | registry:ui | Sections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/tabs.json` |
| avatar | registry:ui | A round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/avatar.json` |
| rating | registry:ui | Stars for giving a score as a radio group, or for showing one read-only with fractional fills. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/rating.json` |
| wave-rating | registry:ui | The 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 g… | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/wave-rating.json` |
| stat | registry:ui | Key figures as a description list: label, value and a caption with an optional trend arrow. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/stat.json` |
| number-ticker | registry:ui | A number that counts up to its value when it comes into view, formatted for the locale. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/number-ticker.json` |
| code-block | registry:ui | A block of code with an optional caption, a language label and a copy button. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/code-block.json` |
| corner-frame | registry:ui | A box with bracket marks on its corners, in any size, thickness, colour and inset. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/corner-frame.json` |
| phone-frame | registry:ui | A 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/phone-frame.json` |
| browser-frame | registry:ui | A browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/browser-frame.json` |
| youtube-embed | registry:ui | A YouTube video that costs one poster image until it is played, with player controls through its ref. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/youtube-embed.json` |
| carousel | registry:ui | Slides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/carousel.json` |
| preloader | registry:ui | A full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/preloader.json` |
| custom-cursor | registry:ui | A dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/custom-cursor.json` |
| scroll-progress | registry:ui | A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/scroll-progress.json` |
| scroll-background | registry:ui | A background that blends from one colour to the next as you scroll, with CSS scroll-driven animations and no JavaScript. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/scroll-background.json` |
| scroll-scene | registry:ui | A 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/scroll-scene.json` |
| wipe-transition | registry:ui | Switches content behind a band that sweeps across it, swapping while covered, with a crossfade for phones and reduced motion. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/wipe-transition.json` |
| smooth-scroll | registry:ui | Smooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/smooth-scroll.json` |
| grain | registry:ui | Film grain over a surface, from a tile of SVG noise, with an optional stepped jitter. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/grain.json` |
| hover-reveal | registry:ui | A second layer seen through a soft circle that follows the pointer. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/hover-reveal.json` |
| particles | registry:ui | Dots drifting slowly across a surface, laid out from a seed and moved with CSS alone. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/particles.json` |
| topography | registry:ui | Contour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/topography.json` |
| roll-text | registry:ui | Characters that roll up to a copy of themselves on hover or keyboard focus. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/roll-text.json` |
| dropdown-menu | registry:ui | A menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dropdown-menu.json` |
| context-menu | registry:ui | A 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. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/context-menu.json` |
| navigation-menu | registry:ui | Site navigation with links and triggers that open panels of links in a shared, animated viewport. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/navigation-menu.json` |
| hover-card | registry:ui | A preview card that appears while a link is hovered or focused, for supplementary content. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/hover-card.json` |
| accordion | registry:ui | Stacked sections that open and close under their headings, one or several at a time, with a height animation. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/accordion.json` |
| collapsible | registry:ui | A region that a trigger button shows and hides, with a height animation. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/collapsible.json` |
| progress | registry:ui | A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/progress.json` |
| scroll-area | registry:ui | A scrolling box with thin themed scrollbars that keeps native scrolling. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/scroll-area.json` |
| breadcrumb | registry:ui | The trail of links from the top of a site to the current page, with separators and an ellipsis. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/breadcrumb.json` |
| pagination | registry:ui | Page links with previous and next, an ellipsis, and a helper that works out which page numbers to show. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/pagination.json` |
| table | registry:ui | A data table on native table elements, with a scroll container, selected rows and sortable column headers. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/table.json` |
| sidebar | registry:ui | An application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/sidebar.json` |
| drawer | registry:ui | A bottom sheet dialog for phones that can also be dragged down to close. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/drawer.json` |
| data-table | registry:ui | A table with sortable headers, a text filter, pagination and row selection, built on TanStack Table v9. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/data-table.json` |
| dropzone | registry:ui | A file drop area on a native file input that checks type, size and count, and lists the chosen files. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dropzone.json` |
| kbd | registry:ui | A key or key combination shown as a small keycap, alone or in a group. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/kbd.json` |
| empty-state | registry:ui | What a list, table or page shows when it has nothing in it yet, with an icon, title, description and actions. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/empty-state.json` |
| stepper | registry:ui | The steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/stepper.json` |
| timeline | registry:ui | A vertical list of events with a coloured dot for each status and a line joining them. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/timeline.json` |
| resizable | registry:ui | Panels resized by dragging or with the keyboard, side by side or stacked. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/resizable.json` |
| bar-chart | registry:ui | One series as vertical or horizontal bars that grow in on first view, with a keyboard slider over the bars. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/bar-chart.json` |
| area-chart | registry:ui | One or more series as gradient-filled areas, stacked or overlapping, with a legend and a keyboard slider over the points. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/area-chart.json` |
| donut-chart | registry:ui | Parts of a whole as a ring with the total in the middle and a keyboard-navigable legend of values and shares. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/donut-chart.json` |
| hero | registry:block | The opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/hero.json` |
| feature-grid | registry:block | A grid of features with an icon, a title and a description under a centred section header. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/feature-grid.json` |
| stats | registry:block | A row of key figures that count up when they scroll into view, under a centred section header. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/stats.json` |
| logo-cloud | registry:block | Customer or partner logos in a grid or a scrolling marquee under a small title. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/logo-cloud.json` |
| cta | registry:block | A closing band with a title, a description and one or two actions. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/cta.json` |
| pricing | registry:block | A pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/pricing.json` |
| faq | registry:block | A frequently asked questions section with a header and the answers in an accordion, split or stacked. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/faq.json` |
| testimonials | registry:block | A section of customer quotes with names, roles and avatars, in a masonry or grid layout. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/testimonials.json` |
| contact-form | registry:block | A contact section with a header, contact details and a validated message form that reports pending, success and error states. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/contact-form.json` |
| newsletter | registry:block | A compact sign-up band with an inline email form that reports pending, success and error states. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/newsletter.json` |
| site-footer | registry:block | A page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/site-footer.json` |
| login-form | registry:block | A centred sign-in card with email and password fields, a remember-me checkbox, optional sign-in providers and pending, success and error states. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/login-form.json` |
| signup-form | registry:block | A centred sign-up card with name, email and password fields, a required terms checkbox, optional sign-up providers and pending, success and error states. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/signup-form.json` |
| not-found | registry:block | A 404 page section with a large decorative error code, a page heading, a description, an optional search slot and actions. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/not-found.json` |
| dashboard | registry:block | An application page with a collapsible sidebar, a header, stat cards, a line chart and a recent-activity table. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/dashboard.json` |
| settings | registry:block | An account settings page with tabs for a profile form, a password change and delete-account dialog, and notification switches. | `npx shadcn@latest add https://kevingirelli.github.io/corsair-ui/r/settings.json` |

## For AI agents

```text
You are adding components from @corsair-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/corsair-ui.md) for the component list.
2. Fetch the machine-readable index: https://kevingirelli.github.io/corsair-ui/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: corsair-ui).
```