Progress
A horizontal progress bar that displays a value between 0 and 100.
Default
A progress bar at 60%.
<Progress value={60} />Sizes
Use the size prop to control the track height. The default size is md.
sm
md
<Progress value={60} size="sm" />
<Progress value={60} size="md" />Full and empty
value is clamped between 0 and 100.
<Progress value={0} />
<Progress value={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Required. Clamped to 0–100 |
size | 'sm' | 'md' | 'md' | Track height |
className | string | '' | Additional Tailwind classes |