Progress
Progress bar with value, variants, and sizes. Accessible with ARIA progressbar role.
Usage
tsx
1import { Progress } from '@storm-ds/ui'23<Progress value={60} />Default
Sizes
tsx
1<Progress value={50} size="sm" />2<Progress value={50} size="md" />3<Progress value={50} size="lg" />Variants
tsx
1<Progress value={80} variant="default" />2<Progress value={60} variant="secondary" />3<Progress value={40} variant="destructive" />4<Progress value={90} variant="success" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value |
| max | number | 100 | Maximum value |
| size | 'sm' | 'md' | 'lg' | 'md' | Bar height |
| variant | 'default' | 'secondary' | 'destructive' | 'success' | 'default' | Color variant |
| className | string | - | Custom classes |
Use with AI
Create a Next.js component using Storm UI's Progress. Import: `import { Progress } from '@storm-ds/ui'`. Use `value` prop (0-100). Variants: default, secondary, destructive, success. Sizes: sm, md, lg. Has ARIA progressbar role. Server component compatible. Example: `<Progress value={75} variant="success" />`