Copy-and-own React components for Tailwind CSS 3 and 4: forms, overlays, site chrome, motion, animated text and backgrounds.
Stacked sections that open and close under their headings, one or several at a time, with a height animation.
Callout for important messages on a neutral surface; default, success, warning and destructive tones colour the icon.
Modal that asks the user to confirm or cancel before an action, with action and cancel buttons.
A border with a light travelling around it, paused off screen.
Slow, soft light drifting behind its content, from three radial gradients.
A round picture of a person with a fallback while it loads or when it fails, in three sizes, plus an overlapping group.
Short status or metadata label. Solid, secondary and outline styles, plus success, warning and destructive statuses shown as a coloured dot.
Twelve bars around a hub fading in turn, announced as Loading. No JavaScript.
Text that comes into focus one character at a time, and can blur back out.
The trail of links from the top of a site to the current page, with separators and an ellipsis.
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.
Month grid for picking a date, several dates or a range, with dropdown captions and week numbers. Built on DayPicker.
A closing band with a title, a description and one or two actions.
Container with header, title, description, action, content and footer parts.
Slides on a native scroll-snap track, with keyboard steps, previous and next buttons, dots and an optional coverflow look.
Checkbox with checked, unchecked and indeterminate states.
A block of code with an optional caption, a language label and a copy button.
A region that a trigger button shows and hides, with a height animation.
Pick one colour from a row of swatches: a radio group with arrow keys and form support.
A select with a search box, for long lists of options.
Searchable list navigated with the arrow keys; the base for comboboxes and command menus.
A contact section with a header, contact details and a validated message form that reports pending, success and error states.
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.
An icon button that copies a value and swaps to a check mark, announcing it to screen readers.
A box with bracket marks on its corners, in any size, thickness, colour and inset.
A dot and a trailing ring that follow a mouse pointer, growing over interactive elements and showing labels.
A pill button whose fill gives way to a dashed outline that marches on hover.
DatePicker and DateRangePicker: a calendar in a popover behind a button that shows the chosen date or range.
Modal window centred over the page, with a focus trap, overlay, close button, header, footer, title and description parts.
Words or characters surfacing at scattered moments, the same on server and client.
A floating bar of icon links pinned to the bottom or top of the viewport, with tooltips and an optional reveal after scrolling.
A menu of actions and options that opens from a button, with checkbox and radio items, labels, shortcuts and submenus.
A frequently asked questions section with a header and the answers in an accordion, split or stacked.
A grid of features with an icon, a title and a description under a centred section header.
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.
Title, artist, cover and preview clip for a Spotify link, read on the server from the public embed page.
Film grain over a surface, from a tile of SVG noise, with an optional stepped jitter.
The opening section of a landing page with an eyebrow, a title, a description, actions and an optional media slot.
A marker that slides in behind a phrase, or a hand-drawn line drawn under it.
A preview card that appears while a link is hovered or focused, for supplementary content.
A second layer seen through a soft circle that follows the pointer.
Single-line text control. Its error state comes from aria-invalid, so any form library can drive it.
An input with icons, text or buttons attached on either side.
One-time code input drawn as separate slots, with paste and autofill support.
Accessible name for a form control.
Soft beams of light falling from above, from a small WebGL2 shader.
One series as a line, with a cursor that snaps to points; a slider for keyboards and screen readers.