mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
docs: add composition section
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user