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

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

tsx

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

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

Run the examples build to regenerate the index:

bash

pnpm examples:build

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

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.