Radix
Animated
A 2nd-order composition that renders a vertical list of labeled Progress bars. Each item can have a custom variant, max value, and formatted label. Exported from the progress subpath.
Usage quotas
import { ProgressList } from '@primstack/ui/progress'
<ProgressList
items={[
{ label: 'Storage', value: 75, variant: 'default' },
{ label: 'Bandwidth', value: 90, variant: 'warning' },
{ label: 'API calls', value: 45, variant: 'success' },
]}
/>Onboarding checklist
import { ProgressList } from '@primstack/ui'
<ProgressList
items={[
{ label: 'Create account', completed: true },
{ label: 'Set up profile', completed: true },
{ label: 'Invite team', completed: false },
]}
/>