docs: add composition section

This commit is contained in:
shadcn
2026-04-07 15:23:27 +04:00
parent 62f6df75f2
commit f00a94d9e5
78 changed files with 1534 additions and 52 deletions

View File

@@ -62,6 +62,33 @@ import { Progress } from "@/components/ui/progress"
<Progress value={33} />
```
## Composition
### With label and value
Use `ProgressLabel` and `ProgressValue` to add a label and value display.
```tsx showLineNumbers
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@/components/ui/progress"
<Progress value={56} className="w-full max-w-sm">
<ProgressLabel>Upload progress</ProgressLabel>
<ProgressValue />
</Progress>
```
```text
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
└── ProgressIndicator
```
## Examples
### Label