Progress

In the app

A determinate bar with its label and figure above, so the number never floats free of the track.

@varick/ui/components/progressAdded 26 Aug 2026

Submissions routed12%

Usage

import { Progress } from "@varick/ui/components/progress";

export function Example() {
  return <Progress value={72} label="Submissions routed" />;
}

Variants

Across the range

Queued12%

Routed72%

Complete100%

<Progress value={12} label="Queued" />
<Progress value={100} label="Complete" />
<Progress value={45} showValue={false} />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
value	number	required	0 to max. Clamped.
max	number	100	The full-bar value.
label	string	undefined	Shown above the track and used as the aria-label.
showValue	boolean	true	The rounded percentage, right-aligned.

Accessibility

role="progressbar" with aria-valuemin, aria-valuemax and aria-valuenow. Pass a label or the bar is unnamed.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.track {
  height: 6px;
  border-radius: 4px;
  background: var(--fill);
  overflow: hidden;
}
.bar {
  height: 100%;
  border-radius: 4px;
  background: var(--canvas);
  transition: width 300ms var(--ease-out);
}