Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
Installation
pnpm dlx shadcn@latest add @shark-ui/progress
Usage
import { Progress } from "@/components/ui/progress";
<Progress value={50} />
Orientation
Use the orientation prop to orient the progress bar horizontally or vertically.
Horizontal
Vertical
Examples
With label
Use <ProgressValue /> and <FieldLabel /> to add a label to the progress bar.
66%
Controlled
Use value and to control the progress bar.
Indeterminate
Use the indeterminate prop when the completion percentage is unknown.
API Reference
Progress
Root element of the progress bar.
| Prop | Type | Default |
|---|---|---|
value | number | null | — |
defaultValue | number | — |
onValueChange | (details: ValueChangeDetails) => void | — |
indeterminate | boolean | false |
min | number | 0 |
max | number | 100 |
orientation | "horizontal" | "vertical" | "horizontal" |
className | string | — |
For a complete list of props, see the Ark UI documentation.