Skip to content

Foundations

Progress Bar

Progress and meter bars in five tones with optional stripes, plus a stacked SegmentedBar.

2 variantsMIT

Preview

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/progress-bar.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { ProgressBar, SegmentedBar } from "@/components/ui/progress-bar";

<ProgressBar
  label="Requests left"
  kind="meter"
  value={limit.remaining}
  max={limit.limit}
  tone={limit.remaining < limit.limit * 0.2 ? "warning" : "brand"}
  striped
/>

<SegmentedBar
  label="Context window"
  max={200_000}
  segments={[{ id: "chat", label: "Conversation", value: 52_000, color: "var(--brand)" }]}
/>

Props

PropTypeDefaultDescription
value*number—Current value.
maxnumber100Upper bound.
tone"brand" | "positive" | "negative" | "warning" | "neutral""brand"Fill color.
colorstring—Any CSS color for the fill. Overrides `tone`, e.g. a per-series color.
size"sm" | "md" | "lg""md"6, 8 or 12px tall.
stripedbooleanfalseDiagonal stripes on the fill; revealed with clip-path so they never stretch.
kind"progress" | "meter""progress"progressbar for work toward done, meter for a level.
label*string—Accessible name.
valueTextstring—Spoken value; defaults to a percentage.
SegmentedBar.segments*{ id, label, value, color }[]—Stacked segments in order.