Back to templates

Template details

Registry Starter

Free open-source Next.js and shadcn/ui Registry template for building and sharing an AI-native design system.

About this template

Registry Starter is a free, open-source Next.js template built around the shadcn/ui Registry that lets you author, preview, and share a component registry as an AI-native design system. It ships as a deployable Vercel app that turns a single registry.json file into distributable component definitions.

What is Registry Starter?

Registry Starter is a template application that wraps the shadcn/ui Registry system in a ready-to-deploy Next.js app. It reads a repository registry.json file listing registry items (components, blocks, layouts, and a registry:theme item holding Tailwind configuration and CSS variables) and generates per-component JSON endpoints during build and dev. The output is a hosted registry that AI tools and the shadcn/ui CLI can consume. It is distributed on GitHub by Vercel.

Key Features

  • shadcn/ui Registry integration — a registry.json at the repo root is compiled into /r/component-name.json endpoints containing each component's files, content, and metadata.
  • Next.js App Router structure — routes are split into app/(registry) for registry pages and app/demo for UI primitives, components, and blocks.
  • Open in v0 buttons — every component exposes a button that opens v0.dev with a prepopulated prompt and a URL pointing back to the registry's /r/...json endpoint, so v0 receives the theme and related code.
  • CSS-variable theming — restyle every component by editing the tokens in globals.css; custom fonts work via next/font/google or an @font-face rule.
  • MCP support — placing registry.json and its items in the /public folder lets the shadcn/ui CLI's MCP command power tools like Cursor and Windsurf.
  • Token-based authentication — a REGISTRY_AUTH_TOKEN environment variable plus middleware.ts matching /r/:path* protects registry JSON; v0 passes the token as a search parameter.
  • One-click Vercel deploy — a Deploy with Vercel button clones the GitHub repo and provisions a project named for your registry.
  • Local workflow — pnpm install then pnpm dev serves the app on localhost:3000.

Who is it for?

  • Design system maintainers: publish a shared registry of components, themes, and blocks that other teams and AI tools can pull from a single JSON endpoint.
  • Frontend developers using v0: open any registry component directly in a v0 chat with its styles and files preloaded.
  • Teams standardizing on shadcn/ui: centralize Tailwind tokens and CSS variables in one theme item so every consumer inherits the same look.
  • Developers wiring AI coding assistants: expose the registry over MCP to Cursor or Windsurf.

What can you do with Registry Starter?

  • Share a themed component library: edit globals.css tokens, then let the CLI generate /r/...json files that others install into their own projects.
  • Prototype in v0: use the per-component Open in v0 button to start a chat seeded with your design system instead of default styles.
  • Gate a private registry: add the middleware and token so only callers with the correct token query parameter can read registry JSON — the README notes this protects /r/:path routes but not the UI or component previews.

Pros and cons

  • The token middleware protects registry JSON endpoints only; component preview UI stays public unless separately secured.
  • v0 and other AI tools need the token search parameter to reach a protected registry.

Screenshot of Registry Starter