Introduction

Document UI components with live previews, install commands, and a shadcn-compatible registry.

This template is a starting point for your own component library docs site. Documentation lives in MDX, installable source lives in the registry, and registry.json generates shadcn-compatible JSON for consumers.

Live preview

Component pages pair a runnable demo with the exact source users can copy or install.

button-demo

Quick start

pnpm install && pnpm dev

The dev server runs at http://localhost:3000. Docs are available under /docs.

How it fits together

Location	Purpose
`content/docs/`	MDX pages, navigation, and frontmatter
`registry/default/`	Component source users install into their apps
`registry.json`	Registry manifest consumed by the shadcn CLI
`public/r/`	Generated registry JSON served at `/r/*.json`

Keep docs and registry source in sync: demos import from registry/default, and MDX pages display that same code with Vite ?raw imports.

Workflow

Add a component under registry/default/ui/.
Add a demo under registry/default/examples/.
Register the item in registry.json.
Run pnpm registry:build to update public/r/.
Write an MDX page under content/docs/components/.

Docs primitives

These components are available in every MDX page:

Component	Use for
`ComponentTabs`	Tabbed preview and source layout
`ComponentPreview`	Live demo surface
`ComponentSource`	Syntax-highlighted source blocks
`CodeSnippet`	Package-manager-aware install commands

mdx

<ComponentTabs>
  <ComponentPreview name="button-demo">
    <ButtonDemo />
  </ComponentPreview>
  <ComponentSource code={buttonSource} language="tsx" title="button.tsx" />
</ComponentTabs>

What's included

The template ships with a small set of example components to copy from:

Button — variants, sizes, and install commands
Dropdown Menu — nested menu primitives
Select — trigger, content, and items
Scroll Area — custom scrollbar styling
Separator — horizontal and vertical dividers

See Styles for the shared theme tokens those components rely on.

Publish your registry

Before deploying, point install commands and registry.json homepage at your production URL, then rebuild:

pnpm registry:build

Consumers can then install a component with:

bash

npx shadcn@latest add https://your-site.com/r/button.json