Component

Progress

Linear determinate progress bar (wraps Base UI Progress), plus Circular Progress, its ring-shaped sibling: plain SVG, no dependency.

Linear: semantic colors

Uploading

Complete

Almost full

Storage critical

Loading (spring)

The fill is driven by transform: scaleX() on the spring curve, so a value arriving in discrete chunks still moves as one smooth, slightly elastic bar.

Linear: without a label

Linear: indeterminate

Pass value={null} for an unknown-duration task.

API reference

Prop	Type	Default	Description
label	React.ReactNode	None	Text above the bar naming what is progressing. Also its accessible name.
showValue	boolean	false	Prints the percentage on the trailing edge of the label row.
variant	StatusTone	"default"	Colours the fill to report an outcome rather than plain progress.

labelNone

React.ReactNode

Text above the bar naming what is progressing. Also its accessible name.

showValuefalse

boolean

Prints the percentage on the trailing edge of the label row.

variant"default"

StatusTone

Colours the fill to report an outcome rather than plain progress.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/progress").Progress.Root>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent