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

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

```bash
pnpm --filter=v4 registry:build
```

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

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