Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.
Customer or partner logos in a grid or a scrolling marquee under a small title.
Pulls its content toward the mouse while hovered and springs it back on leave.
Content scrolling in a seamless loop, pausing on focus and off screen.
Site navigation with links and triggers that open panels of links in a shared, animated viewport.
A navigation link that marks the current page with aria-current and data-active. Supports asChild for router links.
A compact sign-up band with an inline email form that reports pending, success and error states.
Number field with decrement and increment buttons, min, max and step, following the spinbutton keyboard pattern.
A number that counts up to its value when it comes into view, formatted for the locale.
Page links with previous and next, an ellipsis, and a helper that works out which page numbers to show.
Drifts content at a different speed from the page as it scrolls past, with CSS scroll-driven animations and no JavaScript.
Dots drifting slowly across a surface, laid out from a seed and moved with CSS alone.
Password field with a button that shows what was typed.
Floating panel anchored to a trigger, with header, title and description parts.
A full-screen cover that counts to 100 on first load, waits for your content to be ready, then fades out.
A pricing section with plan cards, a featured plan and an optional monthly or yearly billing switch.
A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown.
A crisp SVG QR code in dots, rounded or square modules. Renders on the server.
A set of options where exactly one can be selected.
Stars for giving a score as a radio group, or for showing one read-only with fractional fills.
Fades and moves content into place when it scrolls into view, alone or staggered in a group. Visible without JavaScript.
Characters that roll up to a copy of themselves on hover or keyboard focus.
Text that decodes itself: noise sweeps across, then each character locks in.
A scrolling box with thin themed scrollbars that keeps native scrolling.
A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript.
Pick one option from a list, with groups, labels and separators.
Horizontal or vertical divider.
Dialog that slides in from any edge of the screen, for menus, filters and side panels.
A band of light sweeping across text now and then, paused off screen.
Draws SVG strokes as if by hand, with optional ink filling in behind the pen, on view or with the scroll.
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 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.
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.
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.