sh4dcnv2 · atlas
← libraries

@hairline

Interaction-first React components where every change of state morphs: one file each, no animation library, hairline borders.

179 components pro available react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://hairlineui.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://hairlineui.com/r/registry.json
bun bunx shadcn@latest add https://hairlineui.com/r/registry.json
fetch registry curl -s https://hairlineui.com/r/registry.json

Components

179 total
Button component

The base action: variants, 24–40px sizes, a 3% press, and status (pending, success, error) shown through an icon slot and a morphing label.

npx shadcn@latest add https://hairlineui.com/r/button.json
Button group component

Connected actions on one surface: a selection fill that is thrown to the segment you pick, dividers that fade beside it, labels that fold into icons when narro…

npx shadcn@latest add https://hairlineui.com/r/button-group.json
Split button component

Dual-action trigger: primary action on the left, trailing chevron on the right opening an aligned dropdown menu.

npx shadcn@latest add https://hairlineui.com/r/split-button.json
Copy button component

Copies on the press: the icon blurs into a self-drawing check, the label morphs to Copied, and a failed copy shakes and says so.

npx shadcn@latest add https://hairlineui.com/r/copy-button.json
Action button component

A button that runs a promise and shows it: the icon slot opens for a spinner, a check draws itself, failures shake, and the label morphs through each.

npx shadcn@latest add https://hairlineui.com/r/action-button.json
Expanding button group component

Icon toolbar where the action you point at, tab to or tap opens its label while neighbours slide aside, with ask-first and done states in place.

npx shadcn@latest add https://hairlineui.com/r/expanding-button-group.json
Floating button group component

Floating canvas toolbar: one indicator thrown to the active tool, a zoom stepper whose value rolls, and a menu that grows out of its chevron.

npx shadcn@latest add https://hairlineui.com/r/floating-button-group.json
Icon morph component

One icon becoming another: blur pop, direction-aware turn, card flip, or strokes that draw themselves. Fast toggling never jumps.

npx shadcn@latest add https://hairlineui.com/r/icon-morph.json
Input component

A one-line field with a label, hint and error that trade places, a clear button that folds in, and one shake when an error arrives.

npx shadcn@latest add https://hairlineui.com/r/input.json
Textarea component

A text box that eases to the height of what you write, scrolls with its own thin thumb and faded edges, and turns into a composer with tools, a send button and…

npx shadcn@latest add https://hairlineui.com/r/textarea.json
Password input component

A password field with an eye that turns into eye-off, a four-step strength meter that fills and names itself, and a Caps Lock warning.

npx shadcn@latest add https://hairlineui.com/r/password-input.json
Search input component

The field at the top of every list: ⌘K focuses it from anywhere, search runs after a pause, the magnifier blurs into a spinner while it loads.

npx shadcn@latest add https://hairlineui.com/r/search-input.json
Select component

A choice from a list that is never the browser's dropdown: the pill grows into its list and folds back as the label morphs.

npx shadcn@latest add https://hairlineui.com/r/select.json
Multi-select component

Several choices from a short list: the pill names them ("Design, Sales +2"), the list rises off it with ticks that draw, and it stays open while you pick.

npx shadcn@latest add https://hairlineui.com/r/multi-select.json
Date picker component

One date, typed or picked: the field reads "tomorrow", "next fri" or "4 nov", and the calendar slides by month while one mark glides between days.

npx shadcn@latest add https://hairlineui.com/r/date-picker.json
Checkbox component

A real checkbox whose fill grows from the centre and whose tick draws itself, with a mixed state that bends into the tick.

npx shadcn@latest add https://hairlineui.com/r/checkbox.json
Radio group component

One choice from a few: the dot pops into the new circle, or, as cards, one selection frame glides from card to card.

npx shadcn@latest add https://hairlineui.com/r/radio-group.json
Switch component

A switch with weight: the thumb stretches on press, is thrown across with a slight overshoot, and spins while an async save settles.

npx shadcn@latest add https://hairlineui.com/r/switch.json
Slider component

One value or a range: a press throws the nearest thumb there, a drag tracks the finger, and the value rises out of the thumb.

npx shadcn@latest add https://hairlineui.com/r/slider.json
Segmented control component

One of a few options side by side: the thumb is thrown to the new segment while its width eases to the new label.

npx shadcn@latest add https://hairlineui.com/r/segmented-control.json
Tooltip component

A name and shortcut for an icon. The first one waits; after that they glide from trigger to trigger like one label travelling along the toolbar.

npx shadcn@latest add https://hairlineui.com/r/tooltip.json
Popover component

A small panel that belongs to a button: it rises off the trigger from the nearest point, flips to fit, and hands focus to what is inside.

npx shadcn@latest add https://hairlineui.com/r/popover.json
Hover card component

A preview of what a link points to: it rises off the link after a rest, stays open while you move onto it, and closes after a short grace.

npx shadcn@latest add https://hairlineui.com/r/hover-card.json
Dropdown menu component

Actions behind a button: the menu rises off the trigger, one highlight glides between rows, and checkbox rows draw their tick in place.

npx shadcn@latest add https://hairlineui.com/r/dropdown-menu.json
Context menu component

Actions where you right-click: the menu grows from the exact point, a long press opens it on touch, and Shift+F10 from the keyboard.

npx shadcn@latest add https://hairlineui.com/r/context-menu.json
Dialog component

A decision that needs the whole screen: the page fades back under a veil of its own colour and the panel rises out of a blur.

npx shadcn@latest add https://hairlineui.com/r/dialog.json
Sheet component

A panel that slides in from an edge and can be thrown back: drag it toward its edge and release speed decides whether it closes.

npx shadcn@latest add https://hairlineui.com/r/sheet.json
Badge component

A status, a tag or a count: statuses ease their colour and morph their word, live dots breathe, counts roll and fold away at zero.

npx shadcn@latest add https://hairlineui.com/r/badge.json
Avatar component

A face, or initials until there is one: the photo rises out of a blur once it has loaded, and a stack of avatars fans open when you point at it.

npx shadcn@latest add https://hairlineui.com/r/avatar.json
Spinner component

Something is happening: a ring with one sweeping arc, three rising dots, or eight petals fading round, in currentColor.

npx shadcn@latest add https://hairlineui.com/r/spinner.json
Progress component

How far along, as a bar or a ring: the fill eases to each value, the percent rolls, and at 100 it turns green and a check draws itself.

npx shadcn@latest add https://hairlineui.com/r/progress.json
Skeleton component

The shape of what's coming, with one soft band of light sweeping across, and a swap that hands over to the real content without a pop.

npx shadcn@latest add https://hairlineui.com/r/skeleton.json
Empty state component

What a list says before there is anything in it: an isometric line drawing in your theme that draws itself, changes with the state and acts out the action.

npx shadcn@latest add https://hairlineui.com/r/empty-state.json
Alert component

A message that sits in the page: its tint, line and icon ease when the tone changes, and dismissing folds it away so the content below slides up.

npx shadcn@latest add https://hairlineui.com/r/alert.json
Kbd component

A keyboard shortcut written for the reader's keyboard (⌘ on a Mac, Ctrl elsewhere) whose keys sink when you press them for real.

npx shadcn@latest add https://hairlineui.com/r/kbd.json
Tabs component

Views of one thing: the underline or pill is thrown to the new tab, the panel slides in from the side you moved toward, and counts roll.

npx shadcn@latest add https://hairlineui.com/r/tabs.json
Accordion component

Sections that open in place: the height eases open, the content rises out of a blur a beat later, and opening one folds the other at the same time.

npx shadcn@latest add https://hairlineui.com/r/accordion.json
Collapsible component

"Show 4 more" that opens in place: the hidden part eases open through a blur while the button's words morph to "Show less".

npx shadcn@latest add https://hairlineui.com/r/collapsible.json
Breadcrumb component

Where you are and the way back: a long trail folds its middle into "…", which opens the hidden crumbs in place one after another.

npx shadcn@latest add https://hairlineui.com/r/breadcrumb.json
Pagination component

Pages of a long list: the current-page mark is thrown to the new number, and in a narrow container it becomes "3 of 12" with a number that rolls.

npx shadcn@latest add https://hairlineui.com/r/pagination.json
Toggle group component

On/off choices side by side whose fills merge: two pressed toggles next to each other square off their inner corners and read as one shape.

npx shadcn@latest add https://hairlineui.com/r/toggle-group.json
Steps component

Where you are in a flow: the line to the next step fills along its length, the finished number blurs into a drawn check, and phones get "Step 2 of 4".

npx shadcn@latest add https://hairlineui.com/r/steps.json
Text morph component

Text that changes the way it should: shared letters slide over, new ones rise out of a blur, the width eases.

npx shadcn@latest add https://hairlineui.com/r/text-morph.json
Status button component

Save, Saving, Saved: the spinner opens in, the check draws itself, errors shake, and the label morphs between them.

npx shadcn@latest add https://hairlineui.com/r/status-button.json
Number roll component

Numbers that change like an odometer: every digit rolls in the direction the number moved.

npx shadcn@latest add https://hairlineui.com/r/number-roll.json
Pricing toggle component

Monthly or yearly: the thumb slides with a little give, and every price on the page rolls to its new amount.

npx shadcn@latest add https://hairlineui.com/r/pricing-toggle.json
Waitlist field component

An email field that becomes its own answer: the button stretches across it, then settles as "You’re on the list · #1,248".

npx shadcn@latest add https://hairlineui.com/r/waitlist-field.json
Code input component

The six boxes, done properly: digits rise in, a paste cascades, a wrong code shakes and clears, the right one becomes a pill with a check.

npx shadcn@latest add https://hairlineui.com/r/code-input.json
Steps form component

A multi-step form in one card that changes shape: steps slide in from the way you’re going, checks shake and explain, and Create turns into what comes next.

npx shadcn@latest add https://hairlineui.com/r/steps-form.json
Date range picker component

A range is one liquid band: it follows your pointer between days, presets flow it to their span, and the dates morph as it moves.

npx shadcn@latest add https://hairlineui.com/r/date-range-picker.json
Morphing nav component

One dropdown that follows you along the menu, gliding and resizing to each item’s content.

npx shadcn@latest add https://hairlineui.com/r/morphing-nav.json
Feature tabs component

One panel, many features: the line slides between tabs, fills as autoplay runs, and the panel eases to each.

npx shadcn@latest add https://hairlineui.com/r/feature-tabs.json
Scroll story component

A how-it-works section that tells itself as you scroll: steps light up at the middle, a rail fills, and one card reshapes into each step’s picture.

npx shadcn@latest add https://hairlineui.com/r/scroll-story.json
Stats band component

Numbers that arrive when you do: hairlines draw themselves, then each figure rolls up from zero in turn.

npx shadcn@latest add https://hairlineui.com/r/stats-band.json
Announcement pill component

"New: …" above your headline that opens into the news: the pill itself grows into a changelog card.

npx shadcn@latest add https://hairlineui.com/r/announcement-pill.json
Testimonials component

One quote, chosen by its people: faces step forward, the words cross-fade through a blur, a ring keeps time.

npx shadcn@latest add https://hairlineui.com/r/testimonials.json
FAQ accordion component

Questions on hairlines that open like they mean it: the answer eases to its height, the plus folds into a minus.

npx shadcn@latest add https://hairlineui.com/r/faq-accordion.json
Logo marquee component

A quiet strip of logos that notices you: it eases to a stop on hover and the logo you point at stays bright.

npx shadcn@latest add https://hairlineui.com/r/logo-marquee.json
Expanding gallery component

An image opens from its exact place in the grid, becomes a spacious viewer, and finds its way back.

npx shadcn@latest add https://hairlineui.com/r/expanding-gallery.json
Card deck component

A tactile stack that fans out, follows your hand, and deals the next card with a measured flick.

npx shadcn@latest add https://hairlineui.com/r/card-deck.json
Workflow canvas component

Connected steps you can move, inspect and follow as work flows through them.

npx shadcn@latest add https://hairlineui.com/r/workflow-canvas.json
Image compare component

Two images, one precise divide. Drag to reveal what changed, then let the handle settle.

npx shadcn@latest add https://hairlineui.com/r/image-compare.json
Magnifying dock component

A dock that makes room for the tool you reach for, then opens it in place.

npx shadcn@latest add https://hairlineui.com/r/magnifying-dock.json
Hold to confirm component

A deliberate action, held for a moment: the ring fills, the label changes, and confirmation settles into a check.

npx shadcn@latest add https://hairlineui.com/r/hold-to-confirm.json
Swipe actions component

A list row that slides over its actions: cells grow with your finger, a full swipe runs the first one, and the row folds away.

npx shadcn@latest add https://hairlineui.com/r/swipe-actions.json
Drop zone component

A considered file uploader. Clear actions, quiet progress and useful feedback.

npx shadcn@latest add https://hairlineui.com/r/drop-zone.json
Drop zone · Membrane component

A drop zone whose border is a membrane: it reaches for the file, holds it, swallows it and passes it through to its row.

npx shadcn@latest add https://hairlineui.com/r/drop-zone-membrane.json
Wheel picker component

Drums you can fling: each column is a real cylinder that decays onto a row, with a lens in full colour over the middle.

npx shadcn@latest add https://hairlineui.com/r/wheel-picker.json
Morphing chart component

Bars, line and area as one set of marks: bars condense into beads, a thread is strung through them, the fill pours down. Drag the switch to scrub it.

npx shadcn@latest add https://hairlineui.com/r/morphing-chart.json
Range ruler component

Two hairline needles across a graduated scale. Thumbs glide without layout thrash and repel each other on contact.

npx shadcn@latest add https://hairlineui.com/r/range-ruler.json
Ratio balancer component

A multi-segment allocation track. Drag dividers to rebalance constrained percentages with zero initial jump.

npx shadcn@latest add https://hairlineui.com/r/ratio-balancer.json
Split pane component

A desktop-grade resizable dual panel. Zero-lag drag, rubber-band spring limits, and double-click preset snapping.

npx shadcn@latest add https://hairlineui.com/r/split-pane.json
Tag input component

The invite field, done properly: typed letters grow a chip round themselves, pasted lists spill out of the caret, and a duplicate flies into its twin.

npx shadcn@latest add https://hairlineui.com/r/tag-input.json
Avatar cropper component

The profile photo field without a modal: the avatar itself grows into the crop, and shrinks back with the face you framed.

npx shadcn@latest add https://hairlineui.com/r/avatar-cropper.json
Week calendar component

A scheduling week you hold in the hand: drag a slot into an event while its times roll, and anything it lands on eases aside.

npx shadcn@latest add https://hairlineui.com/r/week-calendar.json
Inline edit component

Rename a title, a project or a row where it stands: the text becomes the field without moving a pixel, and saves itself.

npx shadcn@latest add https://hairlineui.com/r/inline-edit.json
Combobox component

Pick one or several from a list your server searches: results morph between queries instead of flashing, and picks fly into chips.

npx shadcn@latest add https://hairlineui.com/r/combobox.json
Cron input component

A schedule field people can read: cron or plain English in, the meaning in words and the next runs out, with clock changes flagged.

npx shadcn@latest add https://hairlineui.com/r/cron-input.json
Time range picker component

"Last 15 minutes" for logs, metrics and traces: type 2h or yesterday 14:00–16:00, step by the window, pause live, or drag across a chart to zoom.

npx shadcn@latest add https://hairlineui.com/r/time-range-picker.json
JSON inspector component

Read, search and quote a webhook payload or an API response, or see exactly what changed between two versions of a record.

npx shadcn@latest add https://hairlineui.com/r/json-inspector.json
Stepper input component

A tactile incrementer: tap to step, hold to accelerate, bounds give an elastic bumper shake, and digits roll in place.

npx shadcn@latest add https://hairlineui.com/r/stepper-input.json
Sparkline component

An ultra-compact inline trendline with magnetic scrubber and auto-trend color for table cells and stat cards.

npx shadcn@latest add https://hairlineui.com/r/sparkline.json
Privacy mask component

A frosted optical unmasker for sensitive keys, salaries and tokens, with auto-hide timeout and one-tap copy.

npx shadcn@latest add https://hairlineui.com/r/privacy-mask.json
Data table component

A table whose rows travel: sort and every row glides to its rank, live data re-ranks itself, and selection turns the toolbar into its actions.

npx shadcn@latest add https://hairlineui.com/r/data-table.json
Kanban board component

A pipeline you rearrange by hand: the card becomes the stage it's over while still in the air, and every column's total rolls as it passes.

npx shadcn@latest add https://hairlineui.com/r/kanban-board.json
Filter bar component

The bar above a list, done like Linear’s: one panel from property to value, chips you change in place, and a sentence that becomes filters.

npx shadcn@latest add https://hairlineui.com/r/filter-bar.json
Tree view component

The sidebar of pages, folders or files: carry a row up, down and sideways to nest it, and folders open as you hold them.

npx shadcn@latest add https://hairlineui.com/r/tree-view.json
Doc comments component

Review threads beside the text they quote: the one you choose lines up with its line, and the rest make way.

npx shadcn@latest add https://hairlineui.com/r/doc-comments.json
API keys component

The API keys screen, done properly: the secret rises in once, and Done folds it down into the "sk_live_••••4f2a" it leaves behind.

npx shadcn@latest add https://hairlineui.com/r/api-keys.json
Team members component

Settings → Members, done properly: invited addresses fly out of the field onto their rows, role pills grow into the list of roles, and seats roll.

npx shadcn@latest add https://hairlineui.com/r/team-members.json
Settings form component

A settings page that saves the way people expect: switches save themselves, text edits gather into one bar that rises with "2 unsaved changes".

npx shadcn@latest add https://hairlineui.com/r/settings-form.json
Auth card component

Sign-in that asks one thing at a time: the email field shrinks into a chip round the address, and your server decides whether a password, a code or a link come…

npx shadcn@latest add https://hairlineui.com/r/auth-card.json
Webhooks component

Settings → Webhooks, done properly: "Send test" runs a bead down the wire to the endpoint and back in the answer's colour, and every delivery opens into its re…

npx shadcn@latest add https://hairlineui.com/r/webhooks.json
Domain connect component

A custom domain from typed to live: copyable records that tick green as DNS finds them, checks that wait longer each time, and a rail that runs to Live.

npx shadcn@latest add https://hairlineui.com/r/domain-connect.json
Log stream component

A live tail you can actually read: scroll up and it lets go while a "↓ 128 new" pill counts what arrives, with pause, level counts, search and lines that open …

npx shadcn@latest add https://hairlineui.com/r/log-stream.json
CSV import component

Contacts → Import, done properly: your file's columns thread themselves to your fields, bad cells become fields you fix in place, and the rows go to your serve…

npx shadcn@latest add https://hairlineui.com/r/csv-import.json
Notification inbox component

The bell, done properly: its own circle grows into the inbox, new notifications swing it and roll the count, and read ones fold out of Unread.

npx shadcn@latest add https://hairlineui.com/r/notification-inbox.json
Integrations component

Settings → Integrations, done properly: Connect waits on the provider's own window, then folds away as the account it connected opens in its place.

npx shadcn@latest add https://hairlineui.com/r/integrations.json
Status bars component

A status page that reads at a glance: ninety days a service drawn up bar by bar, one card that glides between them, and incidents whose updates open in as they…

npx shadcn@latest add https://hairlineui.com/r/status-bars.json
Command palette component

⌘K that grows out of the search pill: fuzzy search, nested lists, and commands that run in place.

npx shadcn@latest add https://hairlineui.com/r/command-palette.json
Toast stack component

Notifications that stack, fan out on hover, follow a promise in one toast, and swipe away.

npx shadcn@latest add https://hairlineui.com/r/toast-stack.json
Live activity component

One pill for whatever is happening now: it updates in place, tap it and it grows into a panel, done blurs into a check.

npx shadcn@latest add https://hairlineui.com/r/live-activity.json
Live cursors component

Other people’s cursors gliding over the same page: names that turn into speech bubbles, click ripples, and selections that follow them around.

npx shadcn@latest add https://hairlineui.com/r/live-cursors.json
Live map component

The world as dots, lighting up where things happen: pings ripple, the light lingers, and one card follows the newest event from city to city.

npx shadcn@latest add https://hairlineui.com/r/live-map.json
Theme toggle component

The sun sets into a moon, and the new theme spreads from the button in a circle.

npx shadcn@latest add https://hairlineui.com/r/theme-toggle.json
Pricing calculator component

Drag to your size and watch the price roll, the plan morph and, at the top, “Let’s talk”.

npx shadcn@latest add https://hairlineui.com/r/pricing-calculator.json
Comparison table component

Plans side by side, with a column that glides to the plan under your pointer and prices that roll.

npx shadcn@latest add https://hairlineui.com/r/comparison-table.json
Onboarding checklist component

The first five things, ticked off in place: a ring that fills, checks that draw, and a finish worth seeing.

npx shadcn@latest add https://hairlineui.com/r/onboarding-checklist.json
Sortable list component

Drag to reorder and everything moves: rows slide out of the way, the dropped one settles, every rank rolls, and presets re-sort the lot.

npx shadcn@latest add https://hairlineui.com/r/sortable-list.json
Changelog timeline component

What shipped, drawn as you read: a rail that fills, dots that light, filters that fold the rest away.

npx shadcn@latest add https://hairlineui.com/r/changelog-timeline.json
Changelog trace component

What shipped, routed like a circuit: the line steps aside between releases, and a bead runs down it as you read.

npx shadcn@latest add https://hairlineui.com/r/changelog-trace.json
Changelog scrubber component

Your release history on a ruler you scrub: drag the playhead, or press play and watch the product ship.

npx shadcn@latest add https://hairlineui.com/r/changelog-scrubber.json
Cookie banner component

Asks once, plainly, then folds into a small cookie button in the corner that grows back into the preferences.

npx shadcn@latest add https://hairlineui.com/r/cookie-banner.json
Newsletter footer component

A footer that’s still alive: a signup that becomes its own confirmation, drawn link underlines and your name in outline.

npx shadcn@latest add https://hairlineui.com/r/newsletter-footer.json
Prompt composer component

The input that starts it all: grows as you type, takes files, and turns Send into Stop while answering.

npx shadcn@latest add https://hairlineui.com/r/prompt-composer.json
Agent composer component

The taller composer for agent surfaces: branch, folder and context on a tab above, permissions and model as pills that grow into their lists.

npx shadcn@latest add https://hairlineui.com/r/agent-composer.json
Mentions and commands component

Type @ to pull in context or / for a command. The menu grows from the caret and your text becomes a chip.

npx shadcn@latest add https://hairlineui.com/r/mention-menu.json
Attachment chip component

A file on its way into a prompt: uploading, being read, ready or failed.

npx shadcn@latest add https://hairlineui.com/r/attachment-chip.json
Mode switcher component

Fast, Thinking, Research: a segmented switch with a sliding pill and locked paid modes.

npx shadcn@latest add https://hairlineui.com/r/mode-switcher.json
Model picker component

The model pill in your composer grows into the menu: what each model is for, speed, smarts and thinking effort.

npx shadcn@latest add https://hairlineui.com/r/model-picker.json
Voice input component

Dictate a prompt: a waveform from your real mic level, a timer, then transcribing.

npx shadcn@latest add https://hairlineui.com/r/voice-input.json
Voice note component

A voice message you can scrub and read along with: the waveform fills, the time rolls, and the transcript highlights each word as it’s said.

npx shadcn@latest add https://hairlineui.com/r/voice-note.json
Thinking indicator component

Four quiet loaders for the gap before the first token, with a label, a rolling timer and a finish that draws itself.

npx shadcn@latest add https://hairlineui.com/r/thinking-indicator.json
Thinking trace component

An expandable record of what an agent did: steps, reasoning, search or tool calls.

npx shadcn@latest add https://hairlineui.com/r/thinking-trace.json
Tool call component

One tool invocation from arguments to result: preparing, running, done, failed or denied.

npx shadcn@latest add https://hairlineui.com/r/tool-call.json
Clarifying question component

The agent pauses to ask. Pick with a click or a number key, or type your own; it folds into a one-line receipt.

npx shadcn@latest add https://hairlineui.com/r/clarifying-question.json
Approval card component

The agent asks before it acts: what it wants to do, the details, Approve or Deny.

npx shadcn@latest add https://hairlineui.com/r/approval-card.json
Plan component

An agent’s checklist that ticks itself off: pending, in progress, done, skipped or failed.

npx shadcn@latest add https://hairlineui.com/r/plan.json
Web research component

Watch the agent search: the query types in, page icons stack up as it reads, then it folds into a trail of searches and the pages each one found.

npx shadcn@latest add https://hairlineui.com/r/web-research.json
Command output component

A command the agent runs: the log streams in, folds away on success, and stays open on failure.

npx shadcn@latest add https://hairlineui.com/r/command-output.json
Task progress component

For work that takes minutes: phases, a live timer, stats, cancel, and the result when it’s done.

npx shadcn@latest add https://hairlineui.com/r/task-progress.json
Task log component

What the agent did, task by task, as it does it: steps arrive on a hairline trail, files sit in chips, titles turn past tense.

npx shadcn@latest add https://hairlineui.com/r/task-log.json
Streaming answer component

An answer as it arrives, with inline citations, actions, sources and follow-ups.

npx shadcn@latest add https://hairlineui.com/r/streaming-answer.json
Code block component

Code in an answer: highlighted as it streams, copy and wrap, long files folded, and an optional Apply.

npx shadcn@latest add https://hairlineui.com/r/code-block.json
Citation component

An inline numbered source that previews the site, title and snippet on hover or focus.

npx shadcn@latest add https://hairlineui.com/r/citation.json
Response versions component

Step between regenerated answers with "2 / 3", and regenerate without losing the old ones.

npx shadcn@latest add https://hairlineui.com/r/response-versions.json
Selection actions component

Select text and a pill appears under it. Pick an action or describe an edit, and the rewrite streams in place.

npx shadcn@latest add https://hairlineui.com/r/selection-actions.json
Inline rewrite component

Drag a dial and the paragraph rewrites itself in place: shared words glide, the rest blur out and rise in.

npx shadcn@latest add https://hairlineui.com/r/inline-rewrite.json
Diff review component

Accept or reject what the AI changed, word by word for prose or line by line for code.

npx shadcn@latest add https://hairlineui.com/r/diff-review.json
Action receipts component

What the agent actually did, one quiet line each, with Undo while a ring drains. Several stack into one.

npx shadcn@latest add https://hairlineui.com/r/action-receipt.json
Error and limit states component

Calm, specific notices for failed answers, being offline, rate limits and chats that grow too long.

npx shadcn@latest add https://hairlineui.com/r/chat-notice.json
Usage meter component

Credits, messages or context left: quiet when there’s plenty, clear before it runs out.

npx shadcn@latest add https://hairlineui.com/r/usage-meter.json
Usage limits component

What an agent has left: the context window split by what fills it, and each plan limit with its share and a live reset countdown.

npx shadcn@latest add https://hairlineui.com/r/usage-limits.json
Jump to latest component

A chat that follows the answer as it streams, lets go the moment you scroll up, and brings you back.

npx shadcn@latest add https://hairlineui.com/r/chat-scroll.json
Edit and resend component

Fix a sent message where it sits. The bubble grows into an editor, then folds back and branches the reply.

npx shadcn@latest add https://hairlineui.com/r/message-edit.json
Chat history component

Past chats grouped by day, searchable, with titles that write themselves, rename in place and delete with Undo.

npx shadcn@latest add https://hairlineui.com/r/chat-history.json
Earnings chart component

A bar chart that changes instead of redrawing: bars glide between periods, the scale and the total roll, a readout follows the pointer.

npx shadcn@latest add https://hairlineui.com/r/earnings-chart.json
Steps chart component

A week against a daily goal: days that make it fill in, a wave runs the way you step through the weeks, the totals roll.

npx shadcn@latest add https://hairlineui.com/r/steps-chart.json
Revenue chart component

This year as an area, last year behind it; point at a month and the header becomes the readout, switch the measure and the lines reshape.

npx shadcn@latest add https://hairlineui.com/r/revenue-chart.json
Area chart component

Several series stacked, overlapping or as shares: every band morphs between layouts, and the tiles are the legend, the switches and the readout.

npx shadcn@latest add https://hairlineui.com/r/area-chart.json
Trend chart component

One metric over time, the way an analytics screen needs it: the period before as a dashed line, an unfinished day drawn dashed, a readout that glides with the …

npx shadcn@latest add https://hairlineui.com/r/trend-chart.json
Combo chart component

Every day as a bar and the trend as a line on one scale: point at a day and the header becomes its readout while the line’s dot pings where it lands.

npx shadcn@latest add https://hairlineui.com/r/combo-chart.json
Stage bars component

A funnel you can read at a glance: every stage as a bar against the first, the drop-off between them, and widths that ease when the period changes.

npx shadcn@latest add https://hairlineui.com/r/stage-bars.json
Activity rings component

Three daily goals as concentric rings beside a tight legend, with the week underneath: pick a day and the rings sweep to it.

npx shadcn@latest add https://hairlineui.com/r/activity-rings.json
Donut chart component

Parts of a whole as a ring or a half-ring gauge: point at a slice and the centre rolls to it, hide one and the rest slide round.

npx shadcn@latest add https://hairlineui.com/r/donut-chart.json
Activity heatmap component

Every day as a square, weeks across: one readout glides to the day you point at, and new numbers ripple through week by week.

npx shadcn@latest add https://hairlineui.com/r/activity-heatmap.json
Live line chart component

One metric as it happens: each point slides in at an even pace, the scale eases, and a Live pill pauses the view.

npx shadcn@latest add https://hairlineui.com/r/live-line-chart.json
Agent playback component

Your AI product working, hands-off and on a loop: the hero demo built from the real components.

npx shadcn@latest add https://hairlineui.com/r/agent-playback.json
Wallet block

A balance you can send from: the balance panel turns into the transfer, the button goes Sending → Sent, and the money visibly leaves.

npx shadcn@latest add https://hairlineui.com/r/wallet.json
Pricing plans block

Plans that turn into their own checkout: pick one and its card becomes the order, seats and totals rolling, then Continue opens your checkout.

npx shadcn@latest add https://hairlineui.com/r/pricing-plans.json
Booking block

Book a call on one card: the time you pick prints onto the host’s ticket, then the times turn into your details and the confirmation.

npx shadcn@latest add https://hairlineui.com/r/booking.json
Cart block

A cart whose receipt does the maths in front of you: codes are stamped on, a rail of light fills toward free shipping and every total rolls.

npx shadcn@latest add https://hairlineui.com/r/cart.json
Referral block

A referral pass that fills as friends join: their faces fly up into its notches, and the last one turns the track into Claim.

npx shadcn@latest add https://hairlineui.com/r/referral.json
Feedback block

A score that changes the question: pick 0–10 or stars, the score rolls into the panel, and the follow-up and its tags fit what you picked.

npx shadcn@latest add https://hairlineui.com/r/feedback.json
Buy box block

A product buy box whose swatches repaint the product: pick a colour and size, and Add to bag throws the product into the bag.

npx shadcn@latest add https://hairlineui.com/r/buy-box.json
Checkout block

A one-page checkout whose steps stack into a receipt: contact, address, delivery and your payment element, then Place order turns into the order number.

npx shadcn@latest add https://hairlineui.com/r/checkout.json
Order status block

An order’s route with a parcel riding it: stops light as it passes, the arrival day rolls, and the carrier’s scans slide in.

npx shadcn@latest add https://hairlineui.com/r/order-status.json
Subscription block

A billing page in one card: the plan with a ring through its billing period, usage, card and invoices, and a cancel that offers a pause first.

npx shadcn@latest add https://hairlineui.com/r/subscription.json
File share block

Drop files, watch them upload, and they fold into one share link with an expiry and an optional password.

npx shadcn@latest add https://hairlineui.com/r/file-share.json
Poll block

A poll whose bars race to their share: vote, and every option fills with light while the percentages roll and live votes keep nudging them.

npx shadcn@latest add https://hairlineui.com/r/poll.json
Cookie consent block

A cookie banner with a mascot: every cookie you allow flies to Crumb, who catches it, nibbles it and gets rounder and happier.

npx shadcn@latest add https://hairlineui.com/r/cookie-consent.json
Create password block

A password step with a chameleon: the stronger the password, the better Hide blends in, until only his eye is left.

npx shadcn@latest add https://hairlineui.com/r/create-password.json
Verify code block

A one-time code step with a carrier pigeon: Coo naps through the resend wait with the seconds in a thought bubble, and flies every new code to your mailbox.

npx shadcn@latest add https://hairlineui.com/r/verify-code.json
Delete workspace block

A danger-zone delete with a ghost: as you type the name, Boo climbs out of the workspace’s tile, and holding Delete waves him off the stage.

npx shadcn@latest add https://hairlineui.com/r/delete-workspace.json
Terms block

A terms-of-service step with an owl who reads along: Skim sums up each section in one plain line, gets dizzy if you scroll too fast, and gives a thumbs up at t…

npx shadcn@latest add https://hairlineui.com/r/terms.json
Not found block

A 404 with a search and a puppy: Fetch sniffs as you type, sprints off to fetch the results and comes back with a newspaper, or a stick.

npx shadcn@latest add https://hairlineui.com/r/not-found.json
Waitlist block

A waitlist that is an actual line: you step in at the end with your number over your head, and every friend who joins lets you hop past the person ahead.

npx shadcn@latest add https://hairlineui.com/r/waitlist.json
Storage block

A storage meter with a raccoon and his suitcase: near the limit the case bulges and Pack sits on it to shut it; clean up and he hops down, upgrade and a roomy …

npx shadcn@latest add https://hairlineui.com/r/storage.json
Username block

A username picker with a penguin holding a sign: your name appears on it as you type; if it’s taken, its smug owner slides in hugging a sign with your name on …

npx shadcn@latest add https://hairlineui.com/r/username.json