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