Progress Bar

Displays a single bounded reading as a horizontal meter.

Storage used72%

Configurations

Supported configurations for this component.

5 examples

Within limits

Storage used72%

Nearing limit

Bandwidth88%

Critical

Memory91%

Empty

Queue0%

Full

Sync100%

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
label	`string`	-	Caption shown above the bar and used as the accessible label.
valuereq	`number`	-	0–100; clamped internally.
thresholds	`{warning: number, fault: number}`	-	Where this reading stops being healthy, on the same 0–100 scale as `value`. Supply it and the fill colours itself — the preferred form, since a bar that is TOLD its colour can contradict the number beside it. The order carries the direction: `{warning: 70, fault: 90}` is high-is-bad (storage, memory), `{warning: 30, fault: 15}` is low-is-bad (battery, credits). Boundaries are inclusive.
variant	`'default'\|'warning'\|'fault'`	'default'	Color of the filled segments. The manual fallback, for a bar with no meaningful threshold; `thresholds` wins.
className	`string`	-	Extra classes merged onto the root element.
style	`React.CSSProperties`	-	Inline styles merged onto the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.