Component
Progress & ProfileProgress
Linear bar (gradient or solid brand) plus a circular gradient ring for profile completion.
9:41
Onboarding6 of 7
Profile60%
60%
Profile
Your card is 60% built
Add a bio and one fun fact to unlock the friend stack.
Linear progress + circular ProfileProgress
The audit recommends reframing profile completion as “your card” rather than a chore percentage. Pair ProfileProgress with a preview card and a single actionable CTA, never a bare number.
Props (Progress)
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | 0–100. |
| variant | 'gradient' | 'brand' | 'gradient' | Gradient for celebratory progress (onboarding, profile), brand for utility (uploads). |
Props (ProfileProgress)
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | 0–100. |
| label | string | — | Bottom-line label inside the ring. |
| caption | string | — | Smaller subline. |
| size | number | 120 | Ring diameter in px. |
| strokeWidth | number | 10 | Ring thickness. |