Installation

React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

Any shadcn style works: the components read its theme variables, so they look like the rest of your app in light and dark. They don’t need a provider, a runtime or an animation library. See Theming for the tokens they read.

1. 01

   Create the app

   Skip this if you have one. Pick Tailwind CSS when it asks.

   npmpnpmyarnbun

   CopyCopy

   $ npxnpx create-next-app@latest my-app
2. 02

   Set up shadcn/ui

   It writes components.json and the theme variables into your global CSS.

   npmpnpmyarnbun

   CopyCopy

   $ npxnpx shadcn@latest init
3. 03

   Add a component

   npmpnpmyarnbun

   CopyCopy

   $ npxnpx shadcn@latest add https://hairlineui.com/r/number-roll.json
4. 04

   Use it

   import { NumberRoll } from "@/components/number-roll";<NumberRoll value={downloads} /><NumberRoll value={price} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />

Components that move or listen are client components (they start with "use client"), so you can import them straight into a server page.

Follow shadcn’s Vite guide to add Tailwind CSS v4 and the @/ import alias, then run shadcn init. From there it is the same command as Next.js. Nothing here depends on Next.js: no server components, no router, no next/image.

Each component page has its command under the preview. They all follow one pattern: the registry URL of the component.

Several at once work too, and the CLI asks before it overwrites a file that is already there.

Register the library once in components.json and install by name instead of by URL. Your coding agent reads the same file.

{  "registries": {    "@hairline": "https://hairlineui.com/r/{name}.json"  }}

• The component file in components/, plus its supporting files when it has them (a drag hook, a parser), so the install is complete.
• Other components it builds on. Status button brings Text morph; Pricing toggle brings Number roll. Each page lists them under Requirements.
• The keyframes it uses, added to your global CSS once. They are all named ui-*, so they don’t clash with yours.
• npm packages, only when a component needs one, such as lucide-react for icons.

Every component page shows its full source under Source. Copy each file into your components folder, then copy the keyframes it names from the registry item (/r/<name>.json, under css) into your global CSS.

Connect Claude Code, Codex, Cursor or any MCP client and ask for what you need. Your agent finds the component, reads its props and runs the same install command.

claude mcp add --transport http --scope user hairline-ui https://hairlineui.com/api/mcp

Setup for every other client is on the MCP page. Agents that browse instead can read /llms.txt or any component as markdown.