Gauge

Half-circle speedometer arc with a centered value, unit, and caption.

78%Load

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Progress8 } from "@/components/beste/piece/progress8";

<Progress8
  value={78}
  label="Load"
  unit="%"
  tone="emerald"
/>

More Progress pieces

View all Progress
72%

Progress Ring

progress2

Circular SVG ring with a centered percentage. Tone sets the stroke color.

Deployment68%

Linear Progress

progress3

Labelled progress bar with a percent readout above and a tonal fill.

72%Hydration

Vertical Fill

progress7

Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.

Onboarding4 / 6

Segmented Progress

progress5

Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.

Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%

Stacked Bar

progress6

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

Account
Plan
3
Payment
4
Done

Timeline Steps

progress1

Numbered step dots connected by a line. Completed steps fill emerald with a check.