# Hairline UI

> 113 free, MIT-licensed React components with interactions that feel expensive: AI chat parts, inputs, data and charts, landing page sections. Each installs in one command with the shadcn CLI and takes on the project's shadcn theme.

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react. No animation library and no provider to set up.

- Install one: `npx shadcn@latest add https://hairlineui.com/r/<name>.json`
- MCP server for coding agents: https://hairlineui.com/api/mcp (Streamable HTTP, no key; setup at https://hairlineui.com/mcp)
- shadcn registry index: https://hairlineui.com/r/registry.json

## Components

- [Text morph](https://hairlineui.com/ui/text-morph.md): Text that changes the way it should: shared letters slide over, new ones rise out of a blur, the width eases.
- [Status button](https://hairlineui.com/ui/status-button.md): Save, Saving, Saved: the spinner opens in, the check draws itself, errors shake, and the label morphs between them.
- [Number roll](https://hairlineui.com/ui/number-roll.md): Numbers that change like an odometer: every digit rolls in the direction the number moved.
- [Pricing toggle](https://hairlineui.com/ui/pricing-toggle.md): Monthly or yearly: the thumb slides with a little give, and every price on the page rolls to its new amount.
- [Waitlist field](https://hairlineui.com/ui/waitlist-field.md): An email field that becomes its own answer: the button stretches across it, then settles as "You’re on the list · #1,248".
- [Code input](https://hairlineui.com/ui/code-input.md): 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.
- [Steps form](https://hairlineui.com/ui/steps-form.md): 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.
- [Date range picker](https://hairlineui.com/ui/date-range-picker.md): 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.
- [Morphing nav](https://hairlineui.com/ui/morphing-nav.md): One dropdown that follows you along the menu, gliding and resizing to each item’s content.
- [Feature tabs](https://hairlineui.com/ui/feature-tabs.md): One panel, many features: the line slides between tabs, fills as autoplay runs, and the panel eases to each.
- [Scroll story](https://hairlineui.com/ui/scroll-story.md): 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.
- [Stats band](https://hairlineui.com/ui/stats-band.md): Numbers that arrive when you do: hairlines draw themselves, then each figure rolls up from zero in turn.
- [Announcement pill](https://hairlineui.com/ui/announcement-pill.md): "New: …" above your headline that opens into the news: the pill itself grows into a changelog card.
- [Testimonials](https://hairlineui.com/ui/testimonials.md): One quote, chosen by its people: faces step forward, the words cross-fade through a blur, a ring keeps time.
- [FAQ accordion](https://hairlineui.com/ui/faq-accordion.md): Questions on hairlines that open like they mean it: the answer eases to its height, the plus folds into a minus.
- [Logo marquee](https://hairlineui.com/ui/logo-marquee.md): A quiet strip of logos that notices you: it eases to a stop on hover and the logo you point at stays bright.
- [Expanding gallery](https://hairlineui.com/ui/expanding-gallery.md): An image opens from its exact place in the grid, becomes a spacious viewer, and finds its way back.
- [Card deck](https://hairlineui.com/ui/card-deck.md): A tactile stack that fans out, follows your hand, and deals the next card with a measured flick.
- [Workflow canvas](https://hairlineui.com/ui/workflow-canvas.md): Connected steps you can move, inspect and follow as work flows through them.
- [Image compare](https://hairlineui.com/ui/image-compare.md): Two images, one precise divide. Drag to reveal what changed, then let the handle settle.
- [Magnifying dock](https://hairlineui.com/ui/magnifying-dock.md): A dock that makes room for the tool you reach for, then opens it in place.
- [Hold to confirm](https://hairlineui.com/ui/hold-to-confirm.md): A deliberate action, held for a moment: the ring fills, the label changes, and confirmation settles into a check.
- [Swipe actions](https://hairlineui.com/ui/swipe-actions.md): 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.
- [Drop zone](https://hairlineui.com/ui/drop-zone.md): A considered file uploader. Clear actions, quiet progress and useful feedback.
- [Drop zone · Membrane](https://hairlineui.com/ui/drop-zone-membrane.md): A drop zone whose border is a membrane: it reaches for the file, holds it, swallows it and passes it through to its row.
- [Wheel picker](https://hairlineui.com/ui/wheel-picker.md): Drums you can fling: each column is a real cylinder that decays onto a row, with a lens in full colour over the middle.
- [Morphing chart](https://hairlineui.com/ui/morphing-chart.md): 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.
- [Range ruler](https://hairlineui.com/ui/range-ruler.md): Two hairline needles across a graduated scale. Thumbs glide without layout thrash and repel each other on contact.
- [Ratio balancer](https://hairlineui.com/ui/ratio-balancer.md): A multi-segment allocation track. Drag dividers to rebalance constrained percentages with zero initial jump.
- [Split pane](https://hairlineui.com/ui/split-pane.md): A desktop-grade resizable dual panel. Zero-lag drag, rubber-band spring limits, and double-click preset snapping.
- [Tag input](https://hairlineui.com/ui/tag-input.md): 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.
- [Avatar cropper](https://hairlineui.com/ui/avatar-cropper.md): The profile photo field without a modal: the avatar itself grows into the crop, and shrinks back with the face you framed.
- [Week calendar](https://hairlineui.com/ui/week-calendar.md): 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.
- [Inline edit](https://hairlineui.com/ui/inline-edit.md): Rename a title, a project or a row where it stands: the text becomes the field without moving a pixel, and saves itself.
- [Combobox](https://hairlineui.com/ui/combobox.md): Pick one or several from a list your server searches: results morph between queries instead of flashing, and picks fly into chips.
- [Cron input](https://hairlineui.com/ui/cron-input.md): A schedule field people can read: cron or plain English in, the meaning in words and the next runs out, with clock changes flagged.
- [Time range picker](https://hairlineui.com/ui/time-range-picker.md): "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.
- [JSON inspector](https://hairlineui.com/ui/json-inspector.md): Read, search and quote a webhook payload or an API response, or see exactly what changed between two versions of a record.
- [Stepper input](https://hairlineui.com/ui/stepper-input.md): A tactile incrementer: tap to step, hold to accelerate, bounds give an elastic bumper shake, and digits roll in place.
- [Sparkline](https://hairlineui.com/ui/sparkline.md): An ultra-compact inline trendline with magnetic scrubber and auto-trend color for table cells and stat cards.
- [Privacy mask](https://hairlineui.com/ui/privacy-mask.md): A frosted optical unmasker for sensitive keys, salaries and tokens, with auto-hide timeout and one-tap copy.
- [Data table](https://hairlineui.com/ui/data-table.md): 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.
- [Kanban board](https://hairlineui.com/ui/kanban-board.md): 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.
- [Filter bar](https://hairlineui.com/ui/filter-bar.md): 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.
- [Tree view](https://hairlineui.com/ui/tree-view.md): The sidebar of pages, folders or files: carry a row up, down and sideways to nest it, and folders open as you hold them.
- [Doc comments](https://hairlineui.com/ui/doc-comments.md): Review threads beside the text they quote: the one you choose lines up with its line, and the rest make way.
- [API keys](https://hairlineui.com/ui/api-keys.md): The API keys screen, done properly: the secret rises in once, and Done folds it down into the "sk_live_••••4f2a" it leaves behind.
- [Team members](https://hairlineui.com/ui/team-members.md): 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.
- [Settings form](https://hairlineui.com/ui/settings-form.md): A settings page that saves the way people expect: switches save themselves, text edits gather into one bar that rises with "2 unsaved changes".
- [Auth card](https://hairlineui.com/ui/auth-card.md): 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 comes next.
- [Webhooks](https://hairlineui.com/ui/webhooks.md): 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 request and response.
- [Domain connect](https://hairlineui.com/ui/domain-connect.md): 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.
- [Log stream](https://hairlineui.com/ui/log-stream.md): 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 into their fields.
- [CSV import](https://hairlineui.com/ui/csv-import.md): 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 server in batches.
- [Notification inbox](https://hairlineui.com/ui/notification-inbox.md): 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.
- [Integrations](https://hairlineui.com/ui/integrations.md): Settings → Integrations, done properly: Connect waits on the provider's own window, then folds away as the account it connected opens in its place.
- [Status bars](https://hairlineui.com/ui/status-bars.md): 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're posted.
- [Command palette](https://hairlineui.com/ui/command-palette.md): ⌘K that grows out of the search pill: fuzzy search, nested lists, and commands that run in place.
- [Toast stack](https://hairlineui.com/ui/toast-stack.md): Notifications that stack, fan out on hover, follow a promise in one toast, and swipe away.
- [Live activity](https://hairlineui.com/ui/live-activity.md): One pill for whatever is happening now: it updates in place, tap it and it grows into a panel, done blurs into a check.
- [Live cursors](https://hairlineui.com/ui/live-cursors.md): Other people’s cursors gliding over the same page: names that turn into speech bubbles, click ripples, and selections that follow them around.
- [Live map](https://hairlineui.com/ui/live-map.md): 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.
- [Theme toggle](https://hairlineui.com/ui/theme-toggle.md): The sun sets into a moon, and the new theme spreads from the button in a circle.
- [Pricing calculator](https://hairlineui.com/ui/pricing-calculator.md): Drag to your size and watch the price roll, the plan morph and, at the top, “Let’s talk”.
- [Comparison table](https://hairlineui.com/ui/comparison-table.md): Plans side by side, with a column that glides to the plan under your pointer and prices that roll.
- [Onboarding checklist](https://hairlineui.com/ui/onboarding-checklist.md): The first five things, ticked off in place: a ring that fills, checks that draw, and a finish worth seeing.
- [Sortable list](https://hairlineui.com/ui/sortable-list.md): 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.
- [Changelog timeline](https://hairlineui.com/ui/changelog-timeline.md): What shipped, drawn as you read: a rail that fills, dots that light, filters that fold the rest away.
- [Changelog trace](https://hairlineui.com/ui/changelog-trace.md): What shipped, routed like a circuit: the line steps aside between releases, and a bead runs down it as you read.
- [Changelog scrubber](https://hairlineui.com/ui/changelog-scrubber.md): Your release history on a ruler you scrub: drag the playhead, or press play and watch the product ship.
- [Cookie banner](https://hairlineui.com/ui/cookie-banner.md): Asks once, plainly, then folds into a small cookie button in the corner that grows back into the preferences.
- [Newsletter footer](https://hairlineui.com/ui/newsletter-footer.md): A footer that’s still alive: a signup that becomes its own confirmation, drawn link underlines and your name in outline.
- [Prompt composer](https://hairlineui.com/ui/prompt-composer.md): The input that starts it all: grows as you type, takes files, and turns Send into Stop while answering.
- [Agent composer](https://hairlineui.com/ui/agent-composer.md): The taller composer for agent surfaces: branch, folder and context on a tab above, permissions and model as pills that grow into their lists.
- [Mentions and commands](https://hairlineui.com/ui/mention-menu.md): Type @ to pull in context or / for a command. The menu grows from the caret and your text becomes a chip.
- [Attachment chip](https://hairlineui.com/ui/attachment-chip.md): A file on its way into a prompt: uploading, being read, ready or failed.
- [Mode switcher](https://hairlineui.com/ui/mode-switcher.md): Fast, Thinking, Research: a segmented switch with a sliding pill and locked paid modes.
- [Model picker](https://hairlineui.com/ui/model-picker.md): The model pill in your composer grows into the menu: what each model is for, speed, smarts and thinking effort.
- [Voice input](https://hairlineui.com/ui/voice-input.md): Dictate a prompt: a waveform from your real mic level, a timer, then transcribing.
- [Voice note](https://hairlineui.com/ui/voice-note.md): 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.
- [Thinking indicator](https://hairlineui.com/ui/thinking-indicator.md): Four quiet loaders for the gap before the first token, with a label, a rolling timer and a finish that draws itself.
- [Thinking trace](https://hairlineui.com/ui/thinking-trace.md): An expandable record of what an agent did: steps, reasoning, search or tool calls.
- [Tool call](https://hairlineui.com/ui/tool-call.md): One tool invocation from arguments to result: preparing, running, done, failed or denied.
- [Clarifying question](https://hairlineui.com/ui/clarifying-question.md): The agent pauses to ask. Pick with a click or a number key, or type your own; it folds into a one-line receipt.
- [Approval card](https://hairlineui.com/ui/approval-card.md): The agent asks before it acts: what it wants to do, the details, Approve or Deny.
- [Plan](https://hairlineui.com/ui/plan.md): An agent’s checklist that ticks itself off: pending, in progress, done, skipped or failed.
- [Web research](https://hairlineui.com/ui/web-research.md): 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.
- [Command output](https://hairlineui.com/ui/command-output.md): A command the agent runs: the log streams in, folds away on success, and stays open on failure.
- [Task progress](https://hairlineui.com/ui/task-progress.md): For work that takes minutes: phases, a live timer, stats, cancel, and the result when it’s done.
- [Task log](https://hairlineui.com/ui/task-log.md): 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.
- [Streaming answer](https://hairlineui.com/ui/streaming-answer.md): An answer as it arrives, with inline citations, actions, sources and follow-ups.
- [Code block](https://hairlineui.com/ui/code-block.md): Code in an answer: highlighted as it streams, copy and wrap, long files folded, and an optional Apply.
- [Citation](https://hairlineui.com/ui/citation.md): An inline numbered source that previews the site, title and snippet on hover or focus.
- [Response versions](https://hairlineui.com/ui/response-versions.md): Step between regenerated answers with "2 / 3", and regenerate without losing the old ones.
- [Selection actions](https://hairlineui.com/ui/selection-actions.md): Select text and a pill appears under it. Pick an action or describe an edit, and the rewrite streams in place.
- [Inline rewrite](https://hairlineui.com/ui/inline-rewrite.md): Drag a dial and the paragraph rewrites itself in place: shared words glide, the rest blur out and rise in.
- [Diff review](https://hairlineui.com/ui/diff-review.md): Accept or reject what the AI changed, word by word for prose or line by line for code.
- [Action receipts](https://hairlineui.com/ui/action-receipt.md): What the agent actually did, one quiet line each, with Undo while a ring drains. Several stack into one.
- [Error and limit states](https://hairlineui.com/ui/chat-notice.md): Calm, specific notices for failed answers, being offline, rate limits and chats that grow too long.
- [Usage meter](https://hairlineui.com/ui/usage-meter.md): Credits, messages or context left: quiet when there’s plenty, clear before it runs out.
- [Usage limits](https://hairlineui.com/ui/usage-limits.md): 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.
- [Jump to latest](https://hairlineui.com/ui/chat-scroll.md): A chat that follows the answer as it streams, lets go the moment you scroll up, and brings you back.
- [Edit and resend](https://hairlineui.com/ui/message-edit.md): Fix a sent message where it sits. The bubble grows into an editor, then folds back and branches the reply.
- [Chat history](https://hairlineui.com/ui/chat-history.md): Past chats grouped by day, searchable, with titles that write themselves, rename in place and delete with Undo.
- [Earnings chart](https://hairlineui.com/ui/earnings-chart.md): A bar chart that changes instead of redrawing: bars glide between periods, the scale and the total roll, a readout follows the pointer.
- [Steps chart](https://hairlineui.com/ui/steps-chart.md): 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.
- [Revenue chart](https://hairlineui.com/ui/revenue-chart.md): 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.
- [Area chart](https://hairlineui.com/ui/area-chart.md): Several series stacked, overlapping or as shares: every band morphs between layouts, and the tiles are the legend, the switches and the readout.
- [Trend chart](https://hairlineui.com/ui/trend-chart.md): 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 pointer, and drag to zoom.
- [Combo chart](https://hairlineui.com/ui/combo-chart.md): 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.
- [Stage bars](https://hairlineui.com/ui/stage-bars.md): 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.
- [Activity rings](https://hairlineui.com/ui/activity-rings.md): Three daily goals as concentric rings beside a tight legend, with the week underneath: pick a day and the rings sweep to it.
- [Agent playback](https://hairlineui.com/ui/agent-playback.md): Your AI product working, hands-off and on a loop: the hero demo built from the real components.

## Guides

- [AI chat components](https://hairlineui.com/guides/ai-chat-components): the 32 chat components in the order a conversation uses them, with a Vercel AI SDK example.
- [MCP server](https://hairlineui.com/mcp): connect Claude Code, Cursor, VS Code, Codex or the Claude app.

## Optional

- [Every component in one file](https://hairlineui.com/llms-full.txt): install, usage and props for all 113.
- [Next.js templates](https://hairlineui.com/templates): 42 landing pages and dashboards built with these components, a few free and the rest paid.