Scaffold a complete shadcn component registry with documentation in minutes.
npx create-scn-stackLike
create-t3-app, but for shadcn registries.
The shadcn ecosystem lets you run your own component registry — distributing custom components, hooks, and blocks that anyone can install with npx shadcn add @yourname/button.
Setting one up from scratch means wiring together a framework, registry config, documentation site, and example components. This CLI does all of that for you.
- 🏗️ Interactive CLI — guided setup with sensible defaults
- ⚡ Framework choice — Next.js, Vite, React Router, TanStack Start
- 📖 Docs engine — Fumadocs (recommended), Starlight, or none
- 🎨 Style — New York or Default shadcn style
- 🧩 Starter components — Button, Card, Badge with auto-generated doc pages
- 📦 Registry ready —
registry.json,shadcn build, namespace support - 🔌 Init into existing projects — add a registry to any project
- 🪝 Hooks & blocks — scaffold hooks and blocks alongside components
- 🎭 Theme scaffolding — distributable theme with CSS custom properties
- 🔒 Private registries — bearer token auth with middleware
- 🖼️ Component previews — iframe preview system for docs
- 🤖 v0 integration — "Open in v0" button + URL helpers
- 📄 llms.txt — auto-generated for AI context
- ⚙️ Config file —
.scn-stack.jsonfor repeatable operations - 🚀 Deploy anywhere — Vercel, Netlify, Cloudflare, self-hosted
npx create-scn-stacknpx create-scn-stack initDetects your framework, creates registry.json, components.json, and a build script.
You'll be asked:
- Registry name — identifier for your registry (e.g.,
my-ui) - Project location — folder to create the registry in
- Style — New York or Default
- Homepage — URL where the registry will be hosted
- Framework — Next.js (default), Vite, React Router, TanStack Start
- Docs engine — Fumadocs (default), Starlight, None
- Starter components — essentials, minimal, or empty
- Namespace — e.g.,
@my-ui - Package manager — pnpm, npm, yarn, bun
Then:
cd my-registry
pnpm devYour registry is live at http://localhost:3000 with docs and components ready to go.
my-registry/
├── registry.json # Registry definition
├── registry/new-york/ui/ # Component source files
│ ├── button.tsx
│ ├── card.tsx
│ └── badge.tsx
├── content/docs/ # Documentation (MDX)
│ ├── index.mdx
│ ├── installation.mdx
│ └── components/
│ ├── button.mdx
│ ├── card.mdx
│ └── badge.mdx
├── app/ # Framework app
│ └── docs/ # Docs routes
├── public/r/ # Built registry output
└── components.json # shadcn config
npx create-scn-stack add-component input -d "An input component."
npx create-scn-stack add-hook use-toggle -d "A toggle state hook."
npx create-scn-stack add-block login-form -d "A login form block."Each command creates the source file, updates registry.json, and generates a docs page.
Once deployed, anyone can use your registry:
# Add your namespace
npx shadcn registry add @acme=https://acme.com/r/{name}.json
# Install components
npx shadcn add @acme/buttonnpm install
npm run build # bundle the CLI to dist/
npm run lint # type-check with tsc
npm test # run the Vitest suite
npm run test:watch # watch modeThe suite covers:
- Unit — argument parsing (
args), helpers (utils), and the registry / config generators. - Integration — the built CLI run end-to-end into a temp directory
(
--yesscaffold +add-component), asserting the generated files and registry wiring.
Integration tests build real projects but skip the slow, networked steps
(dependency install, skill install, git init) via the
SCN_STACK_SKIP_INSTALL=1 environment variable. Run npm run build before
the suite so the integration tests have a fresh dist/index.js.
Contributions welcome! Please read CONTRIBUTING.md for branch naming, commit message conventions, the test suite, and the project layout.
This project follows the Contributor Covenant 3.0. By participating you agree to abide by its terms.
MIT
