---
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", "auth", "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-plans"
github_stars: null
component_count: 179
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.netlify.app/registry/hairline
- This file: https://sh4dcn.netlify.app/md/hairline.md
- Pro / pricing: https://hairlineui.com/ui/pricing-plans

## 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 (179)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | 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` |
| donut-chart | registry: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 | registry: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 | registry: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 | 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` |
| wallet | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @hairline to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.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.netlify.app/json (library slug: hairline).
```