@corsair-ui

Corsair colour, radius and base styles for light and dark mode. Every component relies on these variables; override --primary, --primary-foreground and --ring …

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.

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.

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.

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.

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…

The cn() helper: merges class names and resolves conflicting Tailwind utilities.

Title, artist, cover and preview clip for a Spotify link, read on the server from the public embed page.

Turns stories into images for Instagram, WhatsApp and TikTok: renderStoryPng() draws JSX to a 1080 × 1920 PNG in the browser with Satori, shareStory() opens th…

Subscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch.

Whether an element is in the viewport, from IntersectionObserver, with once, margin and amount options.

When a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen.

The id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two.

Triggers an action. Variants default, secondary, outline, ghost, destructive and link; sizes sm, default, lg and three square icon sizes. Supports asChild and …

Animated status indicator for work in progress, announced as Loading.

Short status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot.

Accessible name for a form control.

Single-line text control. Its error state comes from aria-invalid, so any form library can drive it.

Multi-line text control with the same states as Input.

An input with icons, text or buttons attached on either side.

Layout for a control with its label, description and error, plus fieldset and group helpers. Independent of any form library.

FormField: a react-hook-form Controller laid out with Field, with the id, label and ARIA wiring done for you.

Checkbox with checked, unchecked and indeterminate states.

A set of options where exactly one can be selected.

On/off control for settings that apply immediately.

Pick one option from a list, with groups, labels and separators.

Horizontal or vertical divider.

Container with header, title, description, action, content and footer parts.

A card with two faces that turns over in 3D on hover, from a trigger, or from a prop.

A rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot.

Callout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon.

Placeholder shape shown while content loads.

Floating panel anchored to a trigger, with header, title and description parts.

Searchable list navigated with the arrow keys; the base for comboboxes and command menus.

Month grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker.

DatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range.

A select with a search box, for long lists of options.

One-time code input drawn as separate slots, with paste and autofill support.

Pick a number or a range by dragging or with the arrow keys, horizontal or vertical.

A button that stays pressed, in default and outline variants and three sizes.

A set of toggles with single or multiple selection, joined or spaced apart.

A switch between two or more options with one thumb that slides to the active one, in three sizes. Never empty.

Number field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern.

Password field with a button that shows what was typed.

A short label shown on hover and keyboard focus.

Fades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript.

Reveals text word by word, when it comes into view or tied to the scroll position.

Pulls its content toward the mouse while hovered and springs it back on leave.

Drifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript.

Content that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript.

A soft light that follows the pointer across a surface and along its edge.

A border with a light travelling around it, paused off screen.

Slow, soft light drifting behind its content, from three radial gradients.

Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll.

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.

An icon button that copies a value and swaps to a check mark, announcing it to screen readers.

A pill button whose fill gives way to a dashed outline that marches on hover.

Pick one colour from a row of swatches: a radio group with arrow keys and form support.

Twelve bars around a hub fading in turn, announced as Loading. No JavaScript.

A band of light sweeping across text now and then, paused off screen.

Text that comes into focus one character at a time, and can blur back out.

Words, characters or lines rising into place from below their own baseline.

Kinetic type in 3D: characters or words turning into place around their horizontal axis, one after another.

A split-flap board: when the value changes, only the characters that changed flip, like a departure board.

Words or characters surfacing at scattered moments, the same on server and client.

A marker that slides in behind a phrase, or a hand-drawn line drawn under it.

Text that decodes itself: noise sweeps across, then each character locks in.

Bands of colour washing through text like a swell, on one CSS animation.

Writes any text in any font as a signature: outlines drawn by the pen, then inked.

Content scrolling in a seamless loop, pausing on focus and off screen, and draggable by the pointer.

One series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers.

A crisp SVG QR code in dots, rounded or square modules. Renders on the server, and can draw itself in.

A post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one.

A track card with cover art, a link to Spotify and a preview clip that spins a record while it plays.

Soft beams of light falling from above, from a small WebGL2 shader.

A liquid field of colour carried along by layered noise, from one WebGL2 shader.

Modal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts.

Modal that asks the user to confirm or cancel before an action, with action and cancel buttons.

Dialog that slides in from any edge of the screen, for menus, filters and side panels.

Brief notifications shown with a toast() call and a Toaster mounted once, with variants, an optional action, swipe to dismiss and screen reader announcements.

A navigation link that marks the current page with aria-current and data-active. Supports asChild for router links.

A sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls.

A floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling.

Sections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical.

A round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group.

Stars for giving a score as a radio group, or for showing one read-only with fractional fills.

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…

Key figures as a description list: label, value and a caption with an optional trend arrow.

A number that counts up to its value when it comes into view, formatted for the locale.

A block of code with an optional caption, a language label and a copy button.

A box with bracket marks on its corners, in any size, thickness, colour and inset.

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.

A browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions.

A YouTube video that costs one poster image until it is played, with player controls through its ref.

Slides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look.

A full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out.

A dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels.

A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript.

A background that blends from one colour to the next as you scroll, with CSS scroll-driven animations and no JavaScript.

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.

Switches content behind a band that sweeps across it, swapping while covered, with a crossfade for phones and reduced motion.

Smooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way.

Film grain over a surface, from a tile of SVG noise, with an optional stepped jitter.

A second layer seen through a soft circle that follows the pointer.

Dots drifting slowly across a surface, laid out from a seed and moved with CSS alone.

Contour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader.

Characters that roll up to a copy of themselves on hover or keyboard focus.

A menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus.

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.

Site navigation with links and triggers that open panels of links in a shared, animated viewport.

A preview card that appears while a link is hovered or focused, for supplementary content.

Stacked sections that open and close under their headings, one or several at a time, with a height animation.

A region that a trigger button shows and hides, with a height animation.

A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown.

A scrolling box with thin themed scrollbars that keeps native scrolling.

The trail of links from the top of a site to the current page, with separators and an ellipsis.

Page links with previous and next, an ellipsis, and a helper that works out which page numbers to show.

A data table on native table elements, with a scroll container, selected rows and sortable column headers.

An application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut.

A bottom sheet dialog for phones that can also be dragged down to close.

A table with sortable headers, a text filter, pagination and row selection, built on TanStack Table v9.

A file drop area on a native file input that checks type, size and count, and lists the chosen files.

A key or key combination shown as a small keycap, alone or in a group.

What a list, table or page shows when it has nothing in it yet, with an icon, title, description and actions.

The steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical.

A vertical list of events with a coloured dot for each status and a line joining them.

Panels resized by dragging or with the keyboard, side by side or stacked.

One series as vertical or horizontal bars that grow in on first view, with a keyboard slider over the bars.

One or more series as gradient-filled areas, stacked or overlapping, with a legend and a keyboard slider over the points.

Parts of a whole as a ring with the total in the middle and a keyboard-navigable legend of values and shares.

A 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 a…

A 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 a…

The opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot.

A grid of features with an icon, a title and a description under a centred section header.

A row of key figures that count up when they scroll into view, under a centred section header.

Customer or partner logos in a grid or a scrolling marquee under a small title.

A closing band with a title, a description and one or two actions.

A pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch.

A frequently asked questions section with a header and the answers in an accordion, split or stacked.

A section of customer quotes with names, roles and avatars, in a masonry or grid layout.

A contact section with a header, contact details and a validated message form that reports pending, success and error states.

A compact sign-up band with an inline email form that reports pending, success and error states.

A page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links.

A centred sign-in card with email and password fields, a remember-me checkbox, optional sign-in providers and pending, success and error states.

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.

A 404 page section with a large decorative error code, a page heading, a description, an optional search slot and actions.

An application page with a collapsible sidebar, a header, stat cards, a line chart and a recent-activity table.

An account settings page with tabs for a profile form, a password change and delete-account dialog, and notification switches.