Quickstart

Get started with Zeta, secure, protect, and distribute your shadcn/ui components.

Getting Started

Follow these steps to set up Zeta and protect your shadcn/ui components in a Next.js project.

1. Create a Next.js App

Create Next.js app with shadcn CLI

npx shadcn@latest init -d

Select Next.js when prompted and provide a project name.
The -d flag uses default options for a faster setup.

2. Change to Your Project Directory

cd <your-project-name>

3. Add the Zeta Registry

Add Zeta registry

npx shadcn@latest add https://zeta-registry.vercel.app/r/registry-nextjs.json

4. Configure Environment Variables

Copy the example env file and fill in your values:

Copy .env.example to .env

cp .env.example .env

Fill in the required values:

Variable	Type	Required	Description
REGISTRY_TOKEN_SECRET	string	Yes	Secret key for signing and verifying registry tokens. Docs
POLAR_ORG_ID	string	Yes	Your Polar.sh organization ID.
POLAR_ACCESS_TOKEN	string	Yes	API token for accessing Polar.sh endpoints.
POLAR_IS_SANDBOX	bool	No	Set to `true` for sandbox/testing. Defaults to `false`.

See the full environment variable reference for details.

5. Create a Protected Component

Create your component in registry/new-york/<your-component>.
Add a registry.json file describing your component.
See the shadcn registry-item.json documentation for schema and examples.

6. Start the Development Server

Start the Development Server

npm run dev

7. Access Your Protected Component

Visit:

http://localhost:3000/registry/<your-component-name>

Your component is now protected and only accessible via the registry route.

Important

Do not use the shadcn build command (e.g. pnpm dlx shadcn build).
Zeta handles the build and serving process internally. Running build will generate a public r folder with JSON files per component, which is not compatible with Zeta's access control.

Quickstart

On this page