Hairline

Overview

Hairline UI is a collection of free, hand-built React components where every change of state is animated: labels morph, numbers roll and buttons show their progress. Each component is one file, installs with the shadcn CLI, reads the project's existing theme, and adds no animation library and no provider. The registry lists 158 components and 21 blocks.

The same site sells Next.js landing page templates (46 at the time of writing, for SaaS, AI, agency and fintech sites). Six templates are free to download with an account, and paid purchases include a commercial license. The components themselves are free, and a free MCP server lets coding agents search and install them.

Features

• Morphing primitives: Button, input, select, date picker, tabs, dialog, sheet, tooltip and around 40 other core components with animated state changes.
• Interaction components: Text morph, status button, number roll, hold to confirm, swipe actions, wheel picker, magnifying dock and image compare.
• App components: Data table, kanban board, filter bar, tree view, cron input, JSON inspector, log stream, CSV import and notification inbox.
• Marketing sections: Pricing toggle, feature tabs, scroll story, stats band, testimonials, FAQ accordion and logo marquee.
• Blocks: 21 blocks including wallet, pricing plans, booking, cart, checkout, order status, cookie consent and waitlist.
• No animation dependency: Animations ship without an animation library or a provider, and components take on the existing theme.
• MCP server: Free, keyless MCP server so an agent can find a component, read its props and install it.

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @hairline/component-name