shadcn.io is an independent project built on shadcn/ui
A bar at 80 percent, with Almost there! under it. The encouragement is the only visible text.
Put a short note under the bar when you want to cheer the last stretch. Show the number above the bar when people need the exact amount, or a Spinner when you cannot measure it. In React, Base UI shows only the value you pass.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-2">
<Progress aria-label="Profile completion" value={80} />
<p className="text-muted-foreground text-sm">Almost there!</p>
</div>FAQ
Why is the message outside Progress?
Children of Progress render before the track, so anything inside it sits above the bar. To put text below, the demo wraps Progress and a p in a column with gap-2.
Is Almost there! the bar's name?
No. The message is ordinary text that follows the bar.
The name is aria-label on Progress, Profile completion.
How do I tie the message to the bar?
The demo leaves them separate.
Give the p an id and pass it to Progress as aria-describedby, so a screen reader reads it with the bar.
API Reference
Progress
Sets aria-label="Profile completion" and value={80}. The rest is on the Progress page.
