Install anything from the catalog

Every artifact sits on one of five rungs, and the rung tells you what you get. The id is unique across all of them, so any tool that takes an id — the CLI, the API — resolves it without you saying which tier it came from.

The shortest path, and the one that needs nothing installed. Every detail page has the full source with a copy button, and every preview on the site is the real component — not a screenshot of one — so what you see is what lands in your editor.

Primitives, blocks and pages are React with Tailwind utility classes. They import nothing from Hoverlab; the only dependency any of them declares is lucide-react, and the detail page tells you when even that is not needed — which, for the primitives, is about half of them.

For more than one file at a time, or for a whole template. No install step — npx fetches it on demand.

# one block
npx hoverlab add pricing-tiers

# a page, plus every block it is built from
npx hoverlab add checkout-page

# a whole project
npx hoverlab init storefront ./shop

Files land where your project expects them — components/ for blocks, app/ for pages, under src/ if you use it. Full reference in the CLI docs.

Every block and page is also published as a shadcn registry item, so you do not have to adopt our CLI to use the catalog. Point components.json at the registry once and npx shadcn add works against it — including from the shadcn MCP server, which ships with the CLI.

# one block
npx shadcn add @hoverlab/pricing-tiers

# a page, and the twelve blocks it renders
npx shadcn add @hoverlab/saas-landing-page

# the design system: light and dark tokens, radius, icons
npx shadcn add @hoverlab/hoverlab

Setup is one line of config — the registry docs have it, along with what is and is not published there.

The CLI doubles as an MCP server, so the agent in your editor can search the catalog and write the files itself. Registered next to Figma's MCP server, it closes the loop from design to code: the agent reads your selected frame from Figma, finds the closest blocks here, installs them and restyles them to your tokens — a screenshot or a written spec works the same way.

Setup and prompts in the MCP docs.

The MCP server lets an agent search and install. Two smaller documents make what it installs come out consistent, and both are free and need no account.

Design DNA is the design system as one machine-readable document — colour tokens for both themes, radius, spacing and motion, plus the rules that keep generated UI coherent. Paste it into a tool that has no idea what your product looks like and the output stops being generic.

Skills teach a coding agent the catalog itself: what is in it, which rung to reach for, and how to install. Versioned, so an agent is not working from whatever it remembers about the catalog from training.

Blocks and pages are styled with Tailwind utilities against semantic design tokens — bg-card, text-muted-foreground, border-border. They are the shadcn/ui token names, so if your project already uses that convention a block drops in unchanged.

Copy anything you like, from anywhere, with or without an account. Free covers unlimited personal and non-commercial projects, with no attribution required. Pro adds commercial use — client work, products you sell, work for an employer — once, for life.

The full terms, including the cases people actually ask about, are on the licence page. Whichever tier you are on: copied code does not phone home, and nothing breaks when we deploy.