Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.
A band of light sweeping across text now and then, paused off screen.
An application sidebar that collapses to icons or off canvas on desktop and opens as a sheet on mobile, with a keyboard shortcut.
Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll.
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 page footer with a brand, link columns in a navigation landmark, a copyright line and optional social icon links.
A sticky page header with brand, navigation, actions and a sheet menu for small screens, flagging data-scrolled once the page scrolls.
Placeholder shape shown while content loads.
Pick a number or a range by dragging or with the arrow keys, horizontal or vertical.
Words, characters or lines rising into place from below their own baseline.
Smooth wheel and trackpad scrolling for the page, off with reduced motion, with a scrollTo hook that works either way.
Animated status indicator for work in progress, announced as Loading.
A split-flap board: when the value changes, only the characters that changed flip, like a departure board.
A track card with cover art, a link to Spotify and a preview clip that spins a record while it plays.
A soft light that follows the pointer across a surface and along its edge.
A rubber stamp that slams onto the page: it starts large and transparent and lands rotated with a small overshoot.
Key figures as a description list: label, value and a caption with an optional trend arrow.
A row of key figures that count up when they scroll into view, under a centred section header.
The steps of a multi-step flow with complete, current and upcoming states, horizontal or vertical.
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 area, with themes, patterns and a background photo. Drawn by Satori: render it with story-frame or renderStoryPng().
Turns 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.
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 apps draw over.
On/off control for settings that apply immediately.
A data table on native table elements, with a scroll container, selected rows and sortable column headers.
Sections of content shown one at a time, with a segmented or underlined tab list, horizontal or vertical.
A section of customer quotes with names, roles and avatars, in a masonry or grid layout.
Multi-line text control with the same states as Input.
Reveals text word by word, when it comes into view or tied to the scroll position.
Writes any text in any font as a signature: outlines drawn by the pen, then inked.
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.
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.
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 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 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 a violet primary. Installs the theme first, then sets its colours and radius; every text pair meets WCAG AA.
Content that starts tilted back in perspective and straightens as you scroll, with CSS scroll-driven animations and no JavaScript.
A vertical list of events with a coloured dot for each status and a line joining them.
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 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 short label shown on hover and keyboard focus.
Contour lines like a topographic map over slowly shifting terrain, from one WebGL2 shader.
A post from X in your theme, with no embed script: a card, a server component that fetches by id, and a client one.
When a one-shot entrance runs: on first paint, or once in view, without hiding server-rendered content that is already on screen.
Whether an element is in the viewport, from IntersectionObserver, with once, margin and amount options.
Subscribes to a CSS media query. SSR-safe: renders a fallback on the server and hydrates without a mismatch.
The id of the section on screen, for a table of contents, from one IntersectionObserver. SSR-safe, keeps the last section between two.
The cn() helper: merges class names and resolves conflicting Tailwind utilities.
A liquid field of colour carried along by layered noise, from one WebGL2 shader.