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.

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

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

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:

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

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

   1
   // src/middleware.ts
   2
   import { NextResponse } from "next/server";
   3
   import type { NextRequest } from "next/server";
   4
   
   5
   export const config = { matcher: "/r/:path*" };
   6
   
   7
   export function middleware(request: NextRequest) {
   8
     const token = request.nextUrl.searchParams.get("token");
   9
   
   10
     if (token == null || token !== process.env.REGISTRY_AUTH_TOKEN) {
   11
       return new NextResponse("Unauthorized", { status: 401 });
   12
     }
   13
   
   14
     return NextResponse.next();
   15
   }
   16
   
   

When using Open in v0, the v0 platform will use the token search parameter to authenticate with your Registry:

1
const v0Url = `https://v0.dev/chat/api/open?url=https%3A%2F%2Fregistry-starter.vercel.app%2Fr%2Faccordion.json&token=${process.env.REGISTRY_AUTH_TOKEN}`

[!NOTE] This method only protects the /r/:path routes, this does NOT protect the Registry's UI / component previews. If you choose to protect the UI / component preview, you must ensure the registry.json and all registry:items are publicly accessible or protected using the token search parameter. This ensures v0 and other AI Tools have access to use the registry

Running locally

1
pnpm install
2
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