shadcn-ui/apps/v4/examples

Examples

This directory contains demo components for the component documentation.

Directory Structure

examples
├── base
│   ├── ui           # Auto-generated by build-registry.mts
│   ├── lib          # Auto-generated by build-registry.mts
│   ├── hooks        # Auto-generated by build-registry.mts
│   ├── button-demo.tsx
│   └── ...
├── radix
│   ├── ui           # Auto-generated by build-registry.mts
│   ├── lib          # Auto-generated by build-registry.mts
│   ├── hooks        # Auto-generated by build-registry.mts
│   └── ...
└── __index__.tsx     # Auto-generated by build-registry.mts

Adding a New Example

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

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

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

2. Run the examples build to regenerate the index:

pnpm examples:build

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

<ComponentPreview name="button-loading" />

Notes

• The ui, lib, and hooks directories are auto-generated during pnpm registry:build. Do not edit files in these directories directly.
• Example files should be placed directly in examples/base or examples/radix, not in subdirectories.
• Both named exports and default exports are supported.
• After adding or removing examples, run pnpm examples:build to update the index.