shadcn-ui/apps/v4/examples/README.md

Examples

This directory contains demo components for the component documentation.

Directory Structure

examples
├── base
│   ├── button-demo.tsx
│   └── ...
├── radix
│   └── ...
└── __index__.tsx    # Auto-generated by registry:build

Adding a New Example

1. Create a new .tsx file in examples/base or examples/radix:

// examples/base/button-loading.tsx
import { Button } from "@/styles/base-nova/ui/button"

export function ButtonLoading() {
  return <Button disabled>Loading...</Button>
}

2. Run the registry build to regenerate the index:

pnpm --filter=v4 registry:build

3. Use the example in documentation by referencing its name (filename without .tsx):

<ComponentPreview name="button-loading" />

Notes

• Example files should be placed directly in examples/base or examples/radix, not in subdirectories.
• Base examples should import from @/styles/base-nova/*. Radix examples should import from @/styles/radix-nova/*.
• Both named exports and default exports are supported.
• After adding or removing examples, run pnpm --filter=v4 registry:build to update the index.