Documentation
Everything you need: copying a component, installing it with the CLI, wiring it to your editor, and publishing your own.
1. Copy a component
Open any component, preview it live, then hit “Copy AI prompt”. What you get isn't just code — it's an ordered brief that Cursor, Claude Code and v0 follow reliably: the task first, the constraints second, the source last.
Free accounts get two copies a day. Browsing and previewing are always free.
2. Install with the CLI
Every component is a shadcn-compatible registry document, so the official CLI installs it directly with no extra tooling:
Append ?demo=1 to pull the usage file alongside the component.
3. Wire it to your editor
The MCP server gives your agent four tools: natural-language search, fetching a component's source, a ready install command, and the category list. Setup lives on the MCP page.
4. Endpoints
All public and CORS-open:
5. Publish your own
The publish wizard is four steps: paste the component, then the usage code, then the details. The preview updates as you type, so you see exactly what visitors will. You keep authorship of everything you publish.
What a component needs:
- A single TSX file exporting a component (default or named)
- Usage code that renders it without needing external data
- The npm packages it depends on — the preview loads them automatically
6. How previews work
There is no server-side bundler. Each preview is a standalone document in a sandboxed iframe: Babel transforms the TSX, a custom resolver extracts the npm imports and loads them from esm.sh through an import map that guarantees a single React instance, then the demo executes. Server cost is unaffected by how many previews run.
Components that need live data from an outside service (tweet cards, for instance) render empty. That's expected, not a fault.