# 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`:

```tsx
// 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:

```bash
pnpm examples:build
```

3. 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.