# Corsair UI > Copy-and-own React components, blocks, motion and effects for Tailwind CSS 3.4 and 4, installed with the shadcn CLI as @corsair-ui/. Source: https://github.com/KevinGirelli/corsair-ui ## Getting started Works in React 19 projects with Tailwind CSS 3.4 or 4 that have a `components.json` (`pnpm dlx shadcn@latest init`). @corsair-ui is listed in the shadcn registry directory, so there is nothing to configure: the CLI finds it and adds it to `components.json` on the first install. ```bash pnpm dlx shadcn@latest add @corsair-ui/theme # once: colours, radius and base styles pnpm dlx shadcn@latest add @corsair-ui/button # then any item ``` Items are copied into the project as source (`components/ui`, `components/blocks`, `hooks`, `lib`) and are meant to be edited and restyled there. Brand it by overriding `--primary`, `--primary-foreground` and `--ring`; dark mode follows the `dark` class on ``. Everything in one file: https://corsairui.vercel.app/llms-full.txt ## Foundations - [Theme](https://corsairui.vercel.app/llms/theme.md): Corsair 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: Amber](https://corsairui.vercel.app/llms/theme-amber.md): 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 WCAG AA. - [Theme: Blue](https://corsairui.vercel.app/llms/theme-blue.md): 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. - [Theme: Emerald](https://corsairui.vercel.app/llms/theme-emerald.md): 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. - [Theme: Rose](https://corsairui.vercel.app/llms/theme-rose.md): 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. - [Theme: Violet](https://corsairui.vercel.app/llms/theme-violet.md): 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. ## Components - [Accordion](https://corsairui.vercel.app/llms/accordion.md): Stacked sections that open and close under their headings, one or several at a time, with a height animation. - [Alert](https://corsairui.vercel.app/llms/alert.md): Callout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon. - [Alert Dialog](https://corsairui.vercel.app/llms/alert-dialog.md): Modal that asks the user to confirm or cancel before an action, with action and cancel buttons. - [Area Chart](https://corsairui.vercel.app/llms/area-chart.md): One or more series as gradient-filled areas, stacked or overlapping, with a legend and a keyboard slider over the points. - [Avatar](https://corsairui.vercel.app/llms/avatar.md): A round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group. - [Badge](https://corsairui.vercel.app/llms/badge.md): Short status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot. - [Bar Chart](https://corsairui.vercel.app/llms/bar-chart.md): One series as vertical or horizontal bars that grow in on first view, with a keyboard slider over the bars. - [Bars Spinner](https://corsairui.vercel.app/llms/bars-spinner.md): Twelve bars around a hub fading in turn, announced as Loading. No JavaScript. - [Breadcrumb](https://corsairui.vercel.app/llms/breadcrumb.md): The trail of links from the top of a site to the current page, with separators and an ellipsis. - [Button](https://corsairui.vercel.app/llms/button.md): Triggers 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. - [Calendar](https://corsairui.vercel.app/llms/calendar.md): Month grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker. - [Card](https://corsairui.vercel.app/llms/card.md): Container with header, title, description, action, content and footer parts. - [Carousel](https://corsairui.vercel.app/llms/carousel.md): Slides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look. - [Checkbox](https://corsairui.vercel.app/llms/checkbox.md): Checkbox with checked, unchecked and indeterminate states. - [Code Block](https://corsairui.vercel.app/llms/code-block.md): A block of code with an optional caption, a language label and a copy button. - [Collapsible](https://corsairui.vercel.app/llms/collapsible.md): A region that a trigger button shows and hides, with a height animation. - [Color Swatches](https://corsairui.vercel.app/llms/color-swatches.md): Pick one colour from a row of swatches: a radio group with arrow keys and form support. - [Combobox](https://corsairui.vercel.app/llms/combobox.md): A select with a search box, for long lists of options. - [Command](https://corsairui.vercel.app/llms/command.md): Searchable list navigated with the arrow keys; the base for comboboxes and command menus. - [Context Menu](https://corsairui.vercel.app/llms/context-menu.md): 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. - [Copy Button](https://corsairui.vercel.app/llms/copy-button.md): An icon button that copies a value and swaps to a check mark, announcing it to screen readers. - [Corner Frame](https://corsairui.vercel.app/llms/corner-frame.md): A box with bracket marks on its corners, in any size, thickness, colour and inset. - [Dash Button](https://corsairui.vercel.app/llms/dash-button.md): A pill button whose fill gives way to a dashed outline that marches on hover. - [Data Table](https://corsairui.vercel.app/llms/data-table.md): A table with sortable headers, a text filter, pagination and row selection, built on TanStack Table v9. - [Date Picker](https://corsairui.vercel.app/llms/date-picker.md): DatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range. - [Dialog](https://corsairui.vercel.app/llms/dialog.md): Modal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts. - [Dock](https://corsairui.vercel.app/llms/dock.md): A floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling. - [Donut Chart](https://corsairui.vercel.app/llms/donut-chart.md): Parts of a whole as a ring with the total in the middle and a keyboard-navigable legend of values and shares. - [Drawer](https://corsairui.vercel.app/llms/drawer.md): A bottom sheet dialog for phones that can also be dragged down to close. - [Dropdown Menu](https://corsairui.vercel.app/llms/dropdown-menu.md): A menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus. - [Dropzone](https://corsairui.vercel.app/llms/dropzone.md): A file drop area on a native file input that checks type, size and count, and lists the chosen files. - [Empty State](https://corsairui.vercel.app/llms/empty-state.md): What a list, table or page shows when it has nothing in it yet, with an icon, title, description and actions. - [Field](https://corsairui.vercel.app/llms/field.md): Layout for a control with its label, description and error, plus fieldset and group helpers. Independent of any form library. - [Form Field (react-hook-form)](https://corsairui.vercel.app/llms/form.md): FormField: a react-hook-form Controller laid out with Field, with the id, label and ARIA wiring done for you. - [Hover Card](https://corsairui.vercel.app/llms/hover-card.md): A preview card that appears while a link is hovered or focused, for supplementary content. - [Input](https://corsairui.vercel.app/llms/input.md): Single-line text control. Its error state comes from aria-invalid, so any form library can drive it. - [Input Group](https://corsairui.vercel.app/llms/input-group.md): An input with icons, text or buttons attached on either side. - [Input OTP](https://corsairui.vercel.app/llms/input-otp.md): One-time code input drawn as separate slots, with paste and autofill support. - [Kbd](https://corsairui.vercel.app/llms/kbd.md): A key or key combination shown as a small keycap, alone or in a group. - [Label](https://corsairui.vercel.app/llms/label.md): Accessible name for a form control. - [Line Chart](https://corsairui.vercel.app/llms/line-chart.md): One series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers. - [Nav Link](https://corsairui.vercel.app/llms/nav-link.md): A navigation link that marks the current page with aria-current and data-active. Supports asChild for router links. - [Navigation Menu](https://corsairui.vercel.app/llms/navigation-menu.md): Site navigation with links and triggers that open panels of links in a shared, animated viewport. - [Number Input](https://corsairui.vercel.app/llms/number-input.md): Number field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern. - [Pagination](https://corsairui.vercel.app/llms/pagination.md): Page links with previous and next, an ellipsis, and a helper that works out which page numbers to show. - [Password Input](https://corsairui.vercel.app/llms/password-input.md): Password field with a button that shows what was typed. - [Popover](https://corsairui.vercel.app/llms/popover.md): Floating panel anchored to a trigger, with header, title and description parts. - [Progress](https://corsairui.vercel.app/llms/progress.md): A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown. - [QR Code](https://corsairui.vercel.app/llms/qr-code.md): A crisp SVG QR code in dots, rounded or square modules. Renders on the server, and can draw itself in. - [Radio Group](https://corsairui.vercel.app/llms/radio-group.md): A set of options where exactly one can be selected. - [Rating](https://corsairui.vercel.app/llms/rating.md): Stars for giving a score as a radio group, or for showing one read-only with fractional fills. - [Resizable](https://corsairui.vercel.app/llms/resizable.md): Panels resized by dragging or with the keyboard, side by side or stacked. - [Scroll Area](https://corsairui.vercel.app/llms/scroll-area.md): A scrolling box with thin themed scrollbars that keeps native scrolling. - [Segmented Control](https://corsairui.vercel.app/llms/segmented-control.md): A switch between two or more options with one thumb that slides to the active one, in three sizes. Never empty. - [Select](https://corsairui.vercel.app/llms/select.md): Pick one option from a list, with groups, labels and separators. - [Separator](https://corsairui.vercel.app/llms/separator.md): Horizontal or vertical divider. - [Sheet](https://corsairui.vercel.app/llms/sheet.md): Dialog that slides in from any edge of the screen, for menus, filters and side panels. - [Sidebar](https://corsairui.vercel.app/llms/sidebar.md): An application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut. - [Site Header](https://corsairui.vercel.app/llms/site-header.md): A sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls. - [Skeleton](https://corsairui.vercel.app/llms/skeleton.md): Placeholder shape shown while content loads. - [Slider](https://corsairui.vercel.app/llms/slider.md): Pick a number or a range by dragging or with the arrow keys, horizontal or vertical. - [Spinner](https://corsairui.vercel.app/llms/spinner.md): Animated status indicator for work in progress, announced as Loading. - [Spotify Card](https://corsairui.vercel.app/llms/spotify-card.md): A track card with cover art, a link to Spotify and a preview clip that spins a record while it plays. - [Stat](https://corsairui.vercel.app/llms/stat.md): Key figures as a description list: label, value and a caption with an optional trend arrow. - [Stepper](https://corsairui.vercel.app/llms/stepper.md): The steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical. - [Switch](https://corsairui.vercel.app/llms/switch.md): On/off control for settings that apply immediately. - [Table](https://corsairui.vercel.app/llms/table.md): A data table on native table elements, with a scroll container, selected rows and sortable column headers. - [Tabs](https://corsairui.vercel.app/llms/tabs.md): Sections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical. - [Textarea](https://corsairui.vercel.app/llms/textarea.md): Multi-line text control with the same states as Input. - [Timeline](https://corsairui.vercel.app/llms/timeline.md): A vertical list of events with a coloured dot for each status and a line joining them. - [Toast](https://corsairui.vercel.app/llms/toast.md): Brief notifications shown with a toast() call and a Toaster mounted once, with variants, an optional action, swipe to dismiss and screen reader announcements. - [Toggle](https://corsairui.vercel.app/llms/toggle.md): A button that stays pressed, in default and outline variants and three sizes. - [Toggle Group](https://corsairui.vercel.app/llms/toggle-group.md): A set of toggles with single or multiple selection, joined or spaced apart. - [Tooltip](https://corsairui.vercel.app/llms/tooltip.md): A short label shown on hover and keyboard focus. - [Tweet Card](https://corsairui.vercel.app/llms/tweet-card.md): A post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one. - [YouTube Embed](https://corsairui.vercel.app/llms/youtube-embed.md): A YouTube video that costs one poster image until it is played, with player controls through its ref. ## Text - [Blur Text](https://corsairui.vercel.app/llms/blur-text.md): Text that comes into focus one character at a time, and can blur back out. - [Dissolve Text](https://corsairui.vercel.app/llms/dissolve-text.md): Words or characters surfacing at scattered moments, the same on server and client. - [Flip Text](https://corsairui.vercel.app/llms/flip-text.md): Kinetic type in 3D: characters or words turning into place around their horizontal axis, one after another. - [Highlight Text](https://corsairui.vercel.app/llms/highlight-text.md): A marker that slides in behind a phrase, or a hand-drawn line drawn under it. - [Number Ticker](https://corsairui.vercel.app/llms/number-ticker.md): A number that counts up to its value when it comes into view, formatted for the locale. - [Roll Text](https://corsairui.vercel.app/llms/roll-text.md): Characters that roll up to a copy of themselves on hover or keyboard focus. - [Scramble Text](https://corsairui.vercel.app/llms/scramble-text.md): Text that decodes itself: noise sweeps across, then each character locks in. - [Shimmer Text](https://corsairui.vercel.app/llms/shimmer-text.md): A band of light sweeping across text now and then, paused off screen. - [Slide Text](https://corsairui.vercel.app/llms/slide-text.md): Words, characters or lines rising into place from below their own baseline. - [Split Flap](https://corsairui.vercel.app/llms/split-flap.md): A split-flap board: when the value changes, only the characters that changed flip, like a departure board. - [Text Reveal](https://corsairui.vercel.app/llms/text-reveal.md): Reveals text word by word, when it comes into view or tied to the scroll position. - [Text Signature](https://corsairui.vercel.app/llms/text-signature.md): Writes any text in any font as a signature: outlines drawn by the pen, then inked. - [Wave Text](https://corsairui.vercel.app/llms/wave-text.md): Bands of colour washing through text like a swell, on one CSS animation. ## Motion - [Custom Cursor](https://corsairui.vercel.app/llms/custom-cursor.md): A dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels. - [Magnetic](https://corsairui.vercel.app/llms/magnetic.md): Pulls its content toward the mouse while hovered and springs it back on leave. - [Marquee](https://corsairui.vercel.app/llms/marquee.md): Content scrolling in a seamless loop, pausing on focus and off screen, and draggable by the pointer. - [Parallax](https://corsairui.vercel.app/llms/parallax.md): Drifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript. - [Particles](https://corsairui.vercel.app/llms/particles.md): Dots drifting slowly across a surface, laid out from a seed and moved with CSS alone. - [Preloader](https://corsairui.vercel.app/llms/preloader.md): A full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out. - [Reveal](https://corsairui.vercel.app/llms/reveal.md): Fades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript. - [Scroll Background](https://corsairui.vercel.app/llms/scroll-background.md): A background that blends from one colour to the next as you scroll, with CSS scroll-driven animations and no JavaScript. - [Scroll Progress](https://corsairui.vercel.app/llms/scroll-progress.md): A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript. - [Scroll Scene](https://corsairui.vercel.app/llms/scroll-scene.md): 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. - [Smooth Scroll](https://corsairui.vercel.app/llms/smooth-scroll.md): Smooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way. - [Stamp](https://corsairui.vercel.app/llms/stamp.md): A rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot. - [Tilt Scroll](https://corsairui.vercel.app/llms/tilt-scroll.md): Content that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript. - [Wave Rating](https://corsairui.vercel.app/llms/wave-rating.md): 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 go pops the chosen star. Same props and radio group as rating. - [Wipe Transition](https://corsairui.vercel.app/llms/wipe-transition.md): Switches content behind a band that sweeps across it, swapping while covered, with a crossfade for phones and reduced motion. ## Creative - [Animated Border](https://corsairui.vercel.app/llms/animated-border.md): A border with a light travelling around it, paused off screen. - [Browser Frame](https://corsairui.vercel.app/llms/browser-frame.md): A browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions. - [Flip Card](https://corsairui.vercel.app/llms/flip-card.md): A card with two faces that turns over in 3D on hover, from a trigger, or from a prop. - [Hover Reveal](https://corsairui.vercel.app/llms/hover-reveal.md): A second layer seen through a soft circle that follows the pointer. - [Path Beam](https://corsairui.vercel.app/llms/path-beam.md): 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. - [Phone Frame](https://corsairui.vercel.app/llms/phone-frame.md): 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. - [Signature](https://corsairui.vercel.app/llms/signature.md): Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll. - [Spotlight](https://corsairui.vercel.app/llms/spotlight.md): A soft light that follows the pointer across a surface and along its edge. ## Backgrounds - [Aurora](https://corsairui.vercel.app/llms/aurora.md): Slow, soft light drifting behind its content, from three radial gradients. - [Grain](https://corsairui.vercel.app/llms/grain.md): Film grain over a surface, from a tile of SVG noise, with an optional stepped jitter. - [Light Rays](https://corsairui.vercel.app/llms/light-rays.md): Soft beams of light falling from above, from a small WebGL2 shader. - [Topography](https://corsairui.vercel.app/llms/topography.md): Contour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader. - [Warp Gradient](https://corsairui.vercel.app/llms/warp-gradient.md): A liquid field of colour carried along by layered noise, from one WebGL2 shader. ## Blocks - [Call to Action](https://corsairui.vercel.app/llms/cta.md): A closing band with a title, a description and one or two actions. - [Contact Form](https://corsairui.vercel.app/llms/contact-form.md): A contact section with a header, contact details and a validated message form that reports pending, success and error states. - [Dashboard](https://corsairui.vercel.app/llms/dashboard.md): An application page with a collapsible sidebar, a header, stat cards, a line chart and a recent-activity table. - [FAQ](https://corsairui.vercel.app/llms/faq.md): A frequently asked questions section with a header and the answers in an accordion, split or stacked. - [Feature Grid](https://corsairui.vercel.app/llms/feature-grid.md): A grid of features with an icon, a title and a description under a centred section header. - [Hero](https://corsairui.vercel.app/llms/hero.md): The opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot. - [Login Form](https://corsairui.vercel.app/llms/login-form.md): A centred sign-in card with email and password fields, a remember-me checkbox, optional sign-in providers and pending, success and error states. - [Logo Cloud](https://corsairui.vercel.app/llms/logo-cloud.md): Customer or partner logos in a grid or a scrolling marquee under a small title. - [Newsletter](https://corsairui.vercel.app/llms/newsletter.md): A compact sign-up band with an inline email form that reports pending, success and error states. - [Not Found](https://corsairui.vercel.app/llms/not-found.md): A 404 page section with a large decorative error code, a page heading, a description, an optional search slot and actions. - [Pricing](https://corsairui.vercel.app/llms/pricing.md): A pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch. - [Settings](https://corsairui.vercel.app/llms/settings.md): An account settings page with tabs for a profile form, a password change and delete-account dialog, and notification switches. - [Signup Form](https://corsairui.vercel.app/llms/signup-form.md): 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. - [Site Footer](https://corsairui.vercel.app/llms/site-footer.md): A page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links. - [Stats](https://corsairui.vercel.app/llms/stats.md): A row of key figures that count up when they scroll into view, under a centred section header. - [Testimonials](https://corsairui.vercel.app/llms/testimonials.md): A section of customer quotes with names, roles and avatars, in a masonry or grid layout. ## Hooks - [useEntrance](https://corsairui.vercel.app/llms/use-entrance.md): When a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen. - [useInView](https://corsairui.vercel.app/llms/use-in-view.md): Whether an element is in the viewport, from IntersectionObserver, with once, margin and amount options. - [useMediaQuery](https://corsairui.vercel.app/llms/use-media-query.md): Subscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch. - [useScrollSpy](https://corsairui.vercel.app/llms/use-scroll-spy.md): The id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two. ## Utilities - [getSpotifyTrack](https://corsairui.vercel.app/llms/spotify-track.md): Title, artist, cover and preview clip for a Spotify link, read on the server from the public embed page. - [Utils](https://corsairui.vercel.app/llms/utils.md): The cn() helper: merges class names and resolves conflicting Tailwind utilities.