Component
Progress
Shows the completion progress of a task.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/progressExamples
Live previews render through the docs app's PandaCSS codegen.
<Progress aria-label="Upload" value={42} />
<Progress aria-label="Sync" max={200} value={120} size="lg" />
<Progress aria-label="Loading" />
<Progress aria-label="Capacity" shape="circular" showValue value={72} />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `size` | `ProgressSize` | No | - | - |
| `shape` | `ProgressShape` | No | - | Geometry: linear track (default) or circular gauge. |
| `showValue` | `boolean` | No | - | Render the current value in the center of a circular gauge. |
| `formatValue` | `(value: number, max: number) => string` | No | - | Format the centered value read-out (default: whole percent). |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `shape` | `linear`, `circular` |
| `size` | `sm`, `md`, `lg` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/progress.json`
- Recipe: `progress`
- Files: `src/components/ui/progress.tsx`