Components
Progress
Progress bar on Base UI Progress: hairline track, ink fill, value text in Barlow Condensed.
Preview
Uploading documents
Install
bash
npx shadcn add @eloquent/progressUsage
tsx
import { Progress } from "@/components/ui/progress";
<Progress value={60} label="Uploading documents" />States
Not started
In progress
Complete
Indeterminate
| State | Treatment |
|---|---|
value={0} | Empty track |
value={45} | Ink fill to 45% |
value={100} | Full track |
value={null} | Indeterminate: static hatched fill |
showValue={false} | Value text hidden; the name remains |
Keyboard
This component is not interactive. It is not a tab stop, so Tab skips it.
| Key | Action |
|---|---|
| Tab | Skips it; not a tab stop |
Vietnamese
Đang tải tài liệu lên
Ink adaptation
Upstream's rounded muted track becomes a 1px ink outline with a square ink fill. The value is text in Barlow Condensed (tabular), so the amount never relies on the bar alone. Indeterminate is a static hatched fill.