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 set of example components to copy from:

Alert — inline callouts with tone variants
Alert Dialog — blocking confirmation dialogs
Button — variants, sizes, and install commands
Card — header, content, and footer surfaces
Checkbox — boolean toggle control
Context Menu — right-click menus
Dialog — modal windows and overlays
Dropdown Menu — nested menu primitives
Input — single-line text fields
Kbd — keyboard shortcut keycaps
Number Field — numeric input with scrub area
Popover — anchored floating panels
Select — trigger, content, and items
Scroll Area — custom scrollbar styling
Separator — horizontal and vertical dividers
Slider — single and range value sliders
Switch — on/off settings toggles
Tabs — default and line tab variants
Tooltip — hover labels with arrow primitives

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