---
name: "@hairline"
slug: "hairline"
description: "Interaction-first React components where every change of state morphs: one file each, no animation library, hairline borders."
category: "Animated components"
tags: ["ai", "animation", "audio", "auth", "blocks", "buttons", "cards", "charts", "developer-tools", "forms", "hooks", "icons", "loaders", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://hairlineui.com/ui"
github: null
registry: "https://hairlineui.com/r/registry.json"
pro: true
pro_url: "https://hairlineui.com/ui/pricing-toggle"
github_stars: null
component_count: 113
generated_at: "2026-10-17T06:30:14.294Z"
---

# @hairline

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

## Links

- Website: https://hairlineui.com/ui
- Registry JSON: https://hairlineui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/hairline
- This file: https://sh4dcn.vercel.app/md/hairline.md
- Pro / pricing: https://hairlineui.com/ui/pricing-toggle

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://hairlineui.com/r/registry.json
pnpm dlx shadcn@latest add https://hairlineui.com/r/registry.json
bunx shadcn@latest add https://hairlineui.com/r/registry.json
# fetch the raw registry index
curl -s https://hairlineui.com/r/registry.json
```

## Components (113)

| name | type | description | install |
| --- | --- | --- | --- |
| text-morph | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| mention-menu | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-receipt | registry: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` |
| chat-notice | registry: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 | registry: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 | registry: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` |
| chat-scroll | registry: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` |
| message-edit | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| agent-playback | registry: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` |

## For AI agents

```text
You are adding components from @hairline to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/hairline.md) for the component list.
2. Fetch the machine-readable index: https://hairlineui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: hairline).
```