Project Structure

Overview

After running npx create-scn-stack, you'll get a fully configured project. Here's the structure for a Next.js + Fumadocs setup with essentials:

Key Files

registry.json (Root)

The root registry uses the include pattern to compose from per-directory files:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "my-ui",
  "homepage": "https://my-ui.com",
  "include": [
    "registry/new-york/ui/registry.json",
    "registry/new-york/themes/registry.json"
  ]
}

registry/<style>/ui/registry.json

Per-directory registry defining each component. File paths are relative to this file:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "A button component with multiple variants.",
      "dependencies": ["class-variance-authority"],
      "files": [
        { "path": "button.tsx", "type": "registry:ui" }
      ]
    }
  ]
}

components.json

The shadcn configuration for your project. Includes your style, aliases, and namespace.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@my-ui": "https://my-ui.com/r/{name}.json"
  }
}

.scn-stack.json

Stores your project's scaffolding configuration for repeatable operations. Used by add-component, add-hook, and add-block commands.

{
  "$schema": "https://scnstack.sh/schema/scn-stack.json",
  "name": "my-ui",
  "style": "new-york",
  "homepage": "https://my-ui.com",
  "framework": "nextjs",
  "docsEngine": "fumadocs",
  "baseLibrary": "radix",
  "namespace": "@my-ui",
  "features": {
    "skills": true
  }
}

Component Previews

Each component doc page includes a live preview using ComponentPreview and demo files that import directly from the registry source:

import { ComponentPreview } from "@/components/component-preview"
import { ButtonDemo } from "@/components/examples/button-demo"

<ComponentPreview>
  <ButtonDemo />
</ComponentPreview>

For iframe-based previews (useful for isolated rendering), use the PreviewFrame component:

import { PreviewFrame } from "@/components/preview-frame"

<PreviewFrame name="button" height={300} />

This renders the component at /preview/button in an iframe. Add your demos to the PREVIEWS map in app/preview/[name]/page.tsx.

v0 Integration

The generated project includes an "Open in v0" button component and a URL helper:

import { OpenInV0 } from "@/components/open-in-v0"

<OpenInV0 name="button" />

This links to v0.dev with a pre-filled prompt referencing your registry component.

Theme

A custom theme is scaffolded in registry/<style>/themes/ with CSS custom properties. Users can install it with:

npx shadcn add @my-ui/theme-my-ui

Edit the CSS file to customize your registry's visual identity.

llms.txt

An auto-generated llms.txt gives LLMs context about your registry. For Next.js projects, this is a route handler at /llms.txt. For other frameworks, it's a static file in public/.

AI Skills

If enabled, the project includes an .agents/skills/registry/SKILL.md that teaches AI assistants (Claude, Cursor, Copilot) how to work with your specific registry — adding components, hooks, blocks, writing docs, building, and following conventions.

public/r/ (Generated)

Static JSON files generated by shadcn build. This is what the shadcn CLI fetches when users install your components. Don't edit these directly — they're generated from registry.json and your source files.

Adding to the Registry

Components

npx create-scn-stack add-component input -d "A text input component."

Creates registry/<style>/ui/<name>.tsx, adds to registry, generates a doc page, and updates navigation.

Hooks

npx create-scn-stack add-hook use-toggle -d "A toggle state hook."

Creates registry/<style>/hooks/<name>.ts, creates or updates the hooks registry, and generates a doc page.

Blocks

npx create-scn-stack add-block login-form -d "A login form block."

Creates registry/<style>/blocks/<name>.tsx, creates or updates the blocks registry, and generates a doc page.

Manual

1. Create your file in the appropriate registry/<style>/ directory
2. Add the item to the corresponding registry.json
3. Run pnpm registry:build
4. Add a documentation page

Validate & Build

npx shadcn registry validate
pnpm registry:build

Scripts