Progress
Snapping 0-100 progress bar.
CONTEXT 72%
TOKEN 45%
EXPORT 100%
Source
"use client"
import { Progress } from "@/registry/warren/progress/progress"
export default function ProgressDemo() {
return (
<div className="flex w-72 flex-col gap-3 rounded-none border-2 border-border bg-panel p-3">
<div className="flex flex-col gap-1">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
CONTEXT 72%
</span>
<Progress value={72} />
</div>
<div className="flex flex-col gap-1">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
TOKEN 45%
</span>
<Progress value={45} />
</div>
<div className="flex flex-col gap-1">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
EXPORT 100%
</span>
<Progress value={100} />
</div>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/progress.jsonUsage
import { Progress } from "@/components/ui/progress"<Progress value={72} />Value
value is a number from 0 to 100 that drives the fill width. Values outside the range clamp
to the nearest bound: -12 renders 0%, 140 renders 100%. The bar exposes
role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow reflecting the
clamped value. label sets the progressbar's accessible name (default "progress") — give a
meaningful one when the bar sits alone, e.g. label="CONTEXT WINDOW".
API Reference
Prop
Type