- RoleFull-stack engineer & designer
- TookOngoing
- Year2026
- Built with
- Next.js 16
- React 19
- TypeScript
- Tailwind v4
- PostgreSQL
- Drizzle ORM
- MCP
- 436Components published
- 154.1KInstalls per month
- MCPNative agent install
What was wrong
Component libraries assume a human is browsing, copying and pasting. That breaks the moment the person writing the code is an agent: it cannot see a preview, and a screenshot tells it nothing about the props it has to satisfy.
What I did
Every component is published three ways from one source: a live preview for people, a copyable prompt for chat, and an MCP tool call so Cursor and Claude Code install it into the project themselves. The whole stack is self-hosted — Postgres, S3-compatible storage, auth — with no paid SaaS underneath it.
What changed
The registry now carries 436 components and reports 154,100 installs in a month. The MCP path is what drives that: installing a component became one sentence to an agent instead of a browse-copy-paste round trip.
What is inside
Live preview inside the card
Every component actually runs in the grid — a sandboxed iframe with Babel and an import map, mounted only once it scrolls into view.
A native MCP server
Point Cursor, Claude Code or Windsurf at the registry, describe the component you want, and it installs itself into your project.
A copyable AI prompt
Each component ships a written form meant for a model, for anyone who would rather paste into chat than wire up a tool.
Search and filters
Instant ⌘K search, filtering by category, tag, RTL support and free/paid, sorted by trending, newest or most used.
Publishing by others
The registry is not closed — other design engineers publish into it, each with their own profile page.
Entirely self-hosted
Postgres, Drizzle, and Auth.js sign-in over GitHub, Google or a magic link — with no paid SaaS underneath it.
From the build
A walkthrough of 8 screens, from the site and the dashboard.
Trending this weekEvery card in the grid runs the component itself rather than a picture of it, next to its install and like counts — so you can see what people actually use. 
The component browser436 components filtered by category, tag, RTL support and free/paid, sorted by trending, newest or most used. 
A component pageLive preview, source and usage, a button that copies an AI-ready prompt, a one-line CLI command, plus dependencies, licence and install count. 
Setting up the MCP serverAdd the server to your editor’s config, restart it, then ask for the UI in words — Cursor or Claude Code installs the component itself. 
Full templatesComplete pages rather than single components — a waitlist, a product page, a dashboard shell, an authentication flow. 
ThemesDrop-in colour systems for shadcn/ui — copy the CSS variables, paste them, and the whole project changes. 
PricingFree to browse, preview and copy twice a day; Pro at $20 for unlimited copies and a private registry; Team at $60 for the whole team. 
The documentationFour steps: copy a component, install it with the CLI, wire it to your editor, then the endpoints for anyone building on top of the registry.
Majestic — Field Sales & POS
Still reading?
Then we should probably talk. Thirty minutes, free, no slide deck. Worst case you leave with a second opinion.