shadcn/ui Registry Starter

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.

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

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.

Authentication

To protect your registry, you must first protect your registry.json and all registry:item JSON files.
This is made possible with an environment variable and basic Next.js Middleware.

1. Create new REGISTRY_AUTH_TOKEN. For example, you can generate one:

   node -e "console.log(crypto.randomBytes(32).toString('base64url'))"
   

2. Add new middleware.ts file to protect /r/:path routes

   // src/middleware.ts
   import { NextResponse } from "next/server";
   import type { NextRequest } from "next/server";
   
   export const config = { matcher: "/r/:path*" };
   
   export function middleware(request: NextRequest) {
     const token = request.nextUrl.searchParams.get("token");
   
     if (token == null || token !== process.env.REGISTRY_AUTH_TOKEN) {
       return new NextResponse("Unauthorized\