ProgressList

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.

Feedbackprogresslistmetricusagequota

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 },
  ]}
/>

Related Components