Landing pages for SaaSthat look expensive.

Next.js landing page templates and free shadcn/ui components, made to one standard: every state designed, every change in motion.

Browse templates Explore components

One-time payment
Commercial license
Free updates

Said on Threads,
about the work

This level of UI micro-interaction is elite.”

@overnotchappon Threads

Very interesting concept! Mesmerising to watch.”

@browserlondonon Threads

Fun. Might even be… delightful!”

@dbroche.designon Threads

AI made every landing page look the same. These don’t.

Each template starts from its own idea: its layout, type, product screens and motion are made for that concept. Every one runs as a live demo you can try on any screen before you buy.

All 47 templates

Browse by what you’re building

158 free components. Every change in motion.

Labels that morph, numbers that roll, buttons that show their progress: the interactions you would otherwise build by hand. Everything below is running, not a screenshot.

Copy it in

One shadcn CLI command puts the source in your project. It reads your theme, adds no animation library and no provider, and is yours to change.

How installing works

Or ask your coding agent

Connect it to our MCP server once. Ask for what you need and it finds the component, reads its props and installs it. Free, no key.

Connect your agent

From live demo to deployed in an afternoon.

Try any template live, make it yours in one file, and ship it the same day.

Inlay
01Pick a direction
Every template is a complete, original site: its own concept, copy and motion, not a theme with a new colour.
DesktopTabletPhone
14401440px
02Try it on every screen
Each demo runs as a real build. Switch between desktop, tablet and phone before you spend a cent.
site.config.ts
export const site = {
brand: "Acme",
accent: "#305dde"
cta: "Start free",
};
Deploy
03Make it yours, then ship
Words, links, prices and colours live in one config file. Change them, deploy anywhere Next.js runs.

What you’ll be editing

Next.js
React
Tailwind CSS
TypeScript
shadcn/ui

Pay once. Keep it forever.

Every demo is free to explore, 6 templates are free to download, and every purchase includes a commercial license.

Free

No card needed

$0with an account

Loupe, Relay, Tempo, Stillform, Fourteen and Index

6 complete Next.js templates, ready to run
Requires a free account to download
Commercial license for unlimited projects
Free updates to these templates

Create a free account

Single template

One complete project

$39one-time

Pick any template in the catalog.

Complete Next.js template, ready to run
Every word, link and price in one config file
Complete setup and customisation guide
Commercial license for unlimited projects
Free updates to this template

Choose a template

All-access

Best value

$149one-time

$1,599 if you bought every template on its own

Every existing template in the library
Every template we release later
Commercial license for unlimited projects
Free updates to every template

Get All-Access

Already have an account? Sign in

Questions, answered.

Licensing, the stack and downloads, without the fine print. Anything else, ask the person who makes it.

@9to5_dad

Builds Hairline UI, after the day job

I build Hairline UI one template at a time, each from its own idea, and I check everything on my phone before it ships. Tell me what’s missing: the MCP server exists because someone on Threads asked for it.

Talk to me on Threads support@hairlineui.com

$39 for one template, or $149 for every template in the library plus each one added later. Both are one-time payments with a 14-day money-back guarantee. Loupe, Relay, Tempo, Stillform, Fourteen and Index are free with an account.

Yes. Every purchase includes a commercial license: use a template for your own products and any number of client projects. You just can’t resell the template files themselves as a template or UI kit.

Every template runs as a real, isolated build. The demo viewer lets you switch between desktop, laptop, tablet and phone widths in your browser before you buy.

Each template is a standalone Next.js project with React and TypeScript. Styling uses Tailwind CSS or plain CSS, listed on each template’s page. No API keys or environment variables needed to run it.

Everything downloads from your account. The free templates are there as soon as you sign in, and a template or All-Access unlocks right after checkout. Unzip the project, run npm install and npm run dev.

Yes. Every component in the library is free to install from our shadcn registry, with its source, states and motion included, and no account needed. Templates are the paid part, apart from the 6 you can download free with an account.

Yes. They install with the shadcn CLI into your components folder and read your theme’s CSS variables, so they match the rest of your app in light and dark. There’s no provider or animation library to add.

Yes. Connect Claude Code, Codex, Cursor or any MCP client to the Hairline MCP server and ask for what you need, by name or by what it should do. Your agent finds the component, reads its props and installs it. Setup is on the AI and MCP page in the docs.

shadcn/ui gives you primitives and sections to assemble yourself. Hairline templates are finished sites, each designed around its own idea, and the components are the interactions you would otherwise build by hand. They install next to shadcn/ui and use its theme.

Yes, regularly. All-Access holders get every new template at no extra charge. There are 47 today.