Registry Starter

Registry Starter is a free, open-source template built with Next.js and Shadcn/ui Registry to accelerate your AI-Native Design System.

Deploy Your Own · Open in v0 · Theming · Running Locally · File Structure · Read Docs

Deploy Your Own

You can deploy your own version of the Next.js Registry Starter to Vercel with one click:

Open in v0

This registry application also exposes Open in v0 buttons for each component. Once this application is deployed, the Open in v0 button redirects to v0.dev with a prepopulated prompt and a URL pointing back to this registry's /r/${component_name}.json endpoint. This endpoint will provide v0 the necessary file information, content, and metadata to start your v0 chat with your component, theme, and other related code.

These /r/${component_name}.json files are generated using shadcn/ui during the build and dev based on the repository's registry.json. For more information, refer to the documentation.

Theming

To use a custom theme for all the components, all you need to do is modify the CSS tokens in globals.css. More information on these practices can be found on ui.shadcn.com/docs.

MCP

To use this registry with MCP, you must also edit registry.json's first registry-item named theme. This registry:theme item not only contains the tailwind configuration, but it also contains your design tokens / CSS variables.

The shadcn/ui CLI's MCP command will use the entire registy.json file, so it must be put in the /public folder with all of your registry:items. This will enable you to use your registry in tools like Cursor & Windsurf.

Fonts

To use custom fonts, you can either use next/font/google or the @font-face CSS rule in your globals.css.

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbi49c.woff2') format('woff2'),
    url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbj49c.woff') format('woff');
}

If you use @font-face, ensure you modify globals.css tailwind configuration to map your custom font variables to Tailwind fonts. Refer to this Tailwind documentation

Running locally

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

File Structure

app/(registry) routes contains the registry pages.

app/demo routes contains various UI primitives, Components, or Blocks (based on registry.json)

@/components contains all components used in the registry

@/components/ui contains all shadcn/ui UI Primitives used in the registry

@/components/registry contains all components for this Registry Starter application

@/hooks contains all React hooks

@/lib contains all business logic & utils

@/layouts contains all v0 layouts used in registry.json