React components, blocks and complete product screens drawn to one specification. Accessible by default, with every state designed. Free parts are MIT and install as source you own.
Who is behind the product, in the order buyers and candidates check: the belief, how you got here, the numbers, how you work, the people and the next step.
A stack of headings that each reveal their content, one open at a time.
A button that runs async work and reports progress, success or failure on itself, at one width.
A button that cycles through a few labelled states, swapping label and icon in place.
A year of daily activity as a grid, with selection, and a footer that opens a ranked breakdown of where the activity went over the grid.
A quantity control that is a button at zero and a stepper above it.
A live line of what an agent is doing now, with a loading state.
One line inside a reply that says what the agent is doing right now, thinking, searching, reading or writing, with what it is working on and a running clock, then settles into how long it took.
An inline message that keeps context and recovery beside the work.
The Dialog surface for a decision that cannot be undone: no close button, no outside dismiss, focus starting on the safe choice.
A number that counts to its value, with prefix, suffix and locale.
A list whose rows come and go gracefully: new rows open into place, removed rows close their gap and the rest glide to their new positions.
Tabs with an expanding or morphing indicator, including closable tabs.
A thin bar for product news that rotates messages and remembers dismissal.
Cards that ask the user to allow or deny an action, with a risk label.
Choose a value by moving along an arc.
A box that keeps a fixed ratio so images and video never shift the layout.
A docked panel that holds a conversation beside the product.
A file or image chip for chat inputs and forms, with an upload fill, a failed state with Retry and a card for images.
A centred sign-in or sign-up page with a brand header and legal links.
A container that follows its content's height, so a wizard step, a validation summary or a details panel grows and shrinks instead of snapping. The content changes at once.
Pick a day and a time slot from a host's availability.
A person's photo, falling back to initials when there is no image.
A compact stack of avatars with an overflow count and presence.
A small label for status, category or count.
A compact bar series with an accessible label.
A monthly/yearly switch whose price animates as it changes.
A grid of article cards with date, tag and summary.
One article at a reading measure: a progress line under the header, an outline that marks where you are, linkable headings, the author and three related posts.
A button that blooms into a small arc of icon actions.
An image that sharpens into place over a blurred placeholder at its final size, and shows its description if it fails.
A short ordered read, turned page by page: release highlights, a tour, a report. Turning a page moves it from the pile you have not read to the pile you have, so the piles show how far through you are while the counter tells you exactly.
A shelf of documents as spines. Width follows the page count, so a dozen fit in a row and scan like a list. Hover or focus leans a spine out; choosing one pulls it off the shelf and opens its cover and details beside it.
A sheet that rises from the bottom with drag detents.
Distributions side by side as five-number summaries with outliers. Switching to every value spreads the points out from the median on the same axis.
The path to the current page, with each parent linked.
A chart you zoom by dragging a brush, with event annotations.
A KPI against its target in one line: the measure fills across poor, fair and good bands toward a target tick, with the gap written out.
Rank changes of several series across periods.
Button, part of the Button family.
A toolbar of related tools in one raised shell; toggled tools sink into it.
A month grid for choosing a day or a range, usable on its own or inside a picker.
Colour, radius, motion and density tokens, the Tailwind adapter and a small base stylesheet. Every part needs them; import them once in your global CSS. Each part brings its own stylesheet.
A closing band with one clear action.
A titled container with media, status, meta and optional expandable details.
A stack of cards in a folder tab.
A pile of cards you flick through one by one.
An app switcher for open pages. Cards fan out in depth by recency: the page you are on is in front and each step back is one page older. Flick a card up to close it, press the front card to open it full size.