mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-27 06:34:12 +00:00
48 lines
1.2 KiB
Markdown
48 lines
1.2 KiB
Markdown
# 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.
|