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 tokens.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 registry. This registry:style item also contains your design tokens that can be used with MCP.

For example, it looks like this:

    {
      "name": "registry",
      "type": "registry:style",
      "cssVars": {
        "light": {
          "primary": "oklch(0.52 0.13 144.17)",
          "primary-foreground": "oklch(1.0 0 0)",
          "radius": "0.5rem",
          ...
        },
        "dark": {
          "primary": "oklch(0.52 0.13 144.17)",
          "primary-foreground": "oklch(1.0 0 0)",
          ...
        }
      },
      "files": []
    }

Fonts

To use custom fonts, you can either use next/font/google or the @font-face CSS rule. For example, fonts.css might look like:

@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');
}

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

If you use @font-face, you will also need to modify tailwind.css AND tailwind.config.ts to map your custom fonts to Tailwind. Refer to this Tailwind documentation

Running locally

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

File Structure

app/(design) routes contains the registry pages.

app/starters routes contains various starters (using either minimal and shell layouts)

@/components contains all compound components used in the registry

@/components/ui contains all base shadcn/ui used in the registry

@/components/design contains all components for this application

@/hooks contains all React hooks

@/lib contains all business logic & utils