1,591 components,
ready to copy.
Hoverlab is a curated, open-source catalog that starts at a single hover state and goes all the way up to a project you can deploy — and the same artifact is reachable four ways: here, from npx hoverlab add, from npx shadcn add, and from an editor agent over MCP. Browsing, copying and installing are free and need no account and no key. What Pro sells is the licence to ship it.
No account needed to browse or copy · Sign up only to save favorites and sync them across devices
Repaints this page and every block, page and template on the site — live, in your browser, nothing sent anywhere.
Shipped this week
+251 artifacts added in the last 7 days, across 5 rungs of the ladder.
- Effects
- +15
- Primitives
- +43
- Blocks
- +81
- Pages
- +96
- Templates
- +16
Start at whichever rung you need
Grab a single hover state, drop in an entire pricing section, or start from a project that already runs. Each tier is built from the one below it — and you can drill from any rung down to the next.
A taste of what's inside
Four live demos. No screenshots — these are real, running effects rendered in your browser.
The component library your AI editor can install from
The catalog is not only a website. It is a CLI, an MCP server and a design matcher — so the thing that writes your code can reach the same components you can.
Install from the terminal
One command writes any effect, block, page or template into your project. It detects your framework, picks the paths, and tells you which dependencies you still need.
npx hoverlab add pricing-tiersCLI referenceYour editor’s agent can search it
An MCP server over stdio exposes the whole catalog as tools, so Claude Code, Cursor or any MCP client can find a component and install it without leaving the conversation.
search · get · add · match_designMCP serverPoint it at a Figma frame
Paired with Figma’s own MCP, match_design reads a frame region by region and returns the blocks that actually match it — real, accessible source rather than generated markup.
frame → regions → blocksHow the pairing worksNot just React
Take it out in the framework you actually use
Effects are converted — a real single-file component with scoped styles. Blocks and pages ship their rendered markup wrapped as a component file, which is a presentational component rather than a port of the React logic.
React
- Effects
- Converted
- Blocks & pages
- Converted
HTML + CSS
- Effects
- Converted
- Blocks & pages
- Markup only
Vue
- Effects
- Converted
- Blocks & pages
- Markup only
Svelte
- Effects
- Converted
- Blocks & pages
- Markup only
Astro
- Effects
- —
- Blocks & pages
- Markup only
Tailwind
- Effects
- Converted
- Blocks & pages
- Converted
styled-components
- Effects
- Converted
- Blocks & pages
- —
How Hoverlab compares
Three ways to get UI into your project. Hoverlab isn't always the right answer — but it usually is.
Three steps to your next UI
No setup, no boilerplate, no account. Search, copy, install.
Search
One query ranks across all four rungs at once — a hover state, a finished section, a whole screen or a starter project, side by side. Nothing to sign in to.
Copy
Effects hand you HTML and CSS in one click. Blocks and above hand you the real files with their imports and dependency list — and you can tune hue, scale and speed before you take it.
Install
Or skip the browser entirely: npx hoverlab add <id> writes it straight into your repo, detects your framework, and lists the dependencies you still need.
Free forever. Pro once. Studio for ten. Team by the seat.
Every rung of the ladder — effects, blocks, pages and templates — is free to browse, customize and copy for personal projects, and none of it moves behind a login. Pro is a single payment that covers commercial work for good, Studio is that same license bought once for ten people, and Team puts it on a per-seat plan with shared brand tokens and seat management on the way.
Free
No card, no expiry
For individuals exploring, learning, and shipping side projects.
- All 1,126+ effects, all 33 categories
- 307 blocks and 126 pages — full source
- One complete template, free — the Marketing Site project
- CLI and public API — npx hoverlab add <id>
- Live customization sliders
- HTML, CSS and React exports
- Save favorites (sync across devices)
- Bundle up to 10 effects
- Export bundles as CSS, HTML, or ZIP — 10 a day
- PWA — installable, offline-ready
- Personal and non-commercial projects — see the licence
- Community
Pro
One-time payment≈ ₹7,580 · Yours forever
For developers shipping client work and commercial products.
- Everything in Free
- All 32 templates — complete, runnable projects
- 500 AI credits included — they never expire
- Commercial licence — every effect, block, page and template
- Client work, paid products, no attribution
- A dated licence certificate to forward to whoever asks
- Unlimited bundle size
- Unlimited exports — no daily cap
- Vue, Svelte, styled-components and Tailwind exports
- Save your brand colors to your account
- Export your brand as a design system — CSS, Tailwind, Figma
- Private collections, synced across machines
- A licence key for the CLI, MCP and the API
- Twelve months of catalog updates — what you have stays yours
- npx hoverlab outdated — see what changed since you copied it
- Email support — 2 business days
Studio
One-time payment≈ ₹28,700 · Ten seats, yours forever
For agencies and product teams who all ship from one catalog.
- Everything in Pro, for 10 people
- Ten seats for the price of under four Pro licenses
- 2,500 AI credits for the workspace — they never expire
- Invite your team with a workspace code
- One invoice, one license, no renewals
- Twelve months of catalog updates — what you have stays yours
- Priority support — 1 business day
Team
≈ ₹1,150 · Billed monthly, cancel any time
For design systems teams standardizing UI across products.
- Everything in Pro, for every seat
- Priority email support
- Shared brand library — one palette, everyone on the workspace
- Shared collections and bundlesComing
- Workspace-wide themingComing
- Seat managementComing
- Priority support — 1 business day
More than ten people? Studio’s licence for 50 of them, bought once — one invite code and one update window instead of five of each. Everything Pro grants, for everyone on the team, with priority support.
Seats and the licence. It does not include SSO, SCIM or a private repository — if those are what you need, we do not have them yet and would rather say so here than after you buy.
≈ ₹95,900 · Yours forever
Every plan includes PWA install and prefers-reduced-motion support, and the CLI and public API are open to everyone — every export format included. Free covers personal and non-commercial projects; shipping anything from the catalog in client work or a paid product needs Pro, Studio, Enterprise or Team. The licence sets out exactly where that line falls. No credit card required for Free.
Lines marked Coming are on the roadmap and not available yet. A Team seat today grants the full Pro feature set for every member, priority support, and the shared brand library; shared collections, workspace theming and seat management ship later this year.
AI credits are included in the licence — 500 with Pro, 2,500 with Studio and 7,500 with Enterprise, granted once and never expiring. They buy three things: a variation or an edit of any effect (1 credit), a recolour of one onto your brand (1), and a whole section composed from a brief in your design tokens (3). Browsing, copying, the CLI and the API stay free and unmetered, and everyone — including free accounts — gets five generations a day without spending any. Run out and you can buy a top-up pack; there is no subscription for them.
Everything here is free to read, copy and modify under the free licence. What the paid plans add is the commercial one — permission to ship the result in work you are paid for, with a dated certificate you can forward. Both are written out in full.
Studio and Enterprise are licenses, not workspaces: they cover ten and fifty people respectively with the full Pro feature set, and never renew. The shared brand library and shared collections belong to Team.
Paid plans are charged in USD. Rupee amounts are indicative, converted at approximately ₹96/$ — your card issuer’s rate on the day sets the final amount.
36 free designer tools
Design tokens, palettes, shadows, type scales, WCAG contrast, clip-paths, noise textures and more — every tool runs entirely in your browser. No account, no install, works offline.
Questions, answered
Everything you might want to know before signing up. Still curious? Try it free — no credit card needed.
Still have questions?
Create your free accountReady to make your UI move?
Search 1,591 components in one query, copy what fits, and keep going. No account, no install, no credit card.
1,126 effects, 307 blocks, 126 pages and 32 templates — free, open source, no credit card.