registry-system

Registry System

Add a shadcn-compatible component registry to any Next.js project — live Sandpack demos, shadcn add install commands, and a Claude plugin.

View live demo →

Prerequisites

  • Next.js (app router)
  • Tailwind v4
  • shadcn CLI

Install

Copy the engine into your project:

npx degit phucbm/registry-system/src/registry-system src/registry-system

Copy the starter component (rename example to your namespace):

npx degit phucbm/registry-system/registry/example registry/yourname

Setup

Add to your package.json scripts:

"build:registry": "pnpm index-registry && pnpm shadcn build && pnpm clean-registry",
"index-registry": "tsx src/registry-system/scripts/index-registry.ts",
"clean-registry": "tsx src/registry-system/scripts/clean-example-registry.ts"

Set env vars:

NEXT_PUBLIC_SITE_URL=https://your-site.com
NEXT_PUBLIC_REGISTRY_NAMESPACE=yourname
NEXT_PUBLIC_REGISTRY_FOLDER=r

Build the registry:

pnpm build:registry

Claude Plugin

Install:

/plugin install registry-system@phucbm

Available skills:

create-component
Scaffold all required files for a new component
Example: create registry component my-button
validate-component
Check a component passes all registry rules before publishing
Example: validate my-button
push-to-registry
Validate and open a PR adding the component to another repo's registry
Example: push my-button to phucbm/my-site

Rules

See REGISTRY_RULES.md for the full component spec used by the Claude plugin validator.