Progress Steps
Checklist rows for onboarding flows, and labelled bars for quota readouts.
Create your account
Invite your team
At least one teammate
Connect a data source
Set isLast on the final row
Each row draws its own trailing connector, so without isLast the last one trails a line into empty space. Unlike Stepper, which owns the whole track and derives every state from one index, these rows are independent — which is what lets a checklist have several completed items in any order.
Horizontal
Cart
Shipping
Payment
Quota bars
value and progress are separate inputs, so it's on you to keep them in agreement — compute both from the same numbers rather than hardcoding either.
Storage
24 GB / 30 GB
Seats used
8 / 10
ProgressItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| step | number | The number in the circle. Replaced by a checkmark when completed. | |
| title | string | Step name. | |
| description | string | Supporting line under the title. | |
| completed | boolean | false | Swaps the number for a checkmark. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical stacks steps with a connector down the left. |
| isLast | boolean | false | Hides the trailing connector. Set it on the final row or the track runs off into nothing. |
ProgressStat props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | What's being measured. | |
| value | string | Pre-formatted readout, e.g. "24 GB / 30 GB" or "80%". | |
| progress | number | 0–100, drives the bar fill. Independent of value, so keep them consistent. |