Progress

The default linear view fills a horizontal track. Omit value for indeterminate progress.

import { Progress } from '@manti-ui/react';

export default function ProgressBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*8)]">
      <Progress label="Steaming" defaultValue={65} showValue />
    </div>
  );
}

Circular

Use variant="circular" for a ring.

Steaming

65%

Sizes

Small

Medium

Large

API

Prop	Type	Default	Description
`variant`	`'linear' \| 'circular'`	`'linear'`	Linear bar or circular ring.
`label`	`ReactNode`	—	Optional label.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`value`	`number \| null`	—	Controlled value; pass `null` for an indeterminate state.
`defaultValue`	`number \| null`	—	Initial value for uncontrolled usage.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`showValue`	`boolean`	—	Show the formatted value text.
`rootProps`	`HTMLAttributes<HTMLDivElement>`	—	Native, ARIA, and data props for the element with role progressbar.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="progress"][data-part="root"]`	The indicator wrapper.
`header`	`[data-scope="progress"][data-part="header"]`	Row holding the label and value text.
`label`	`[data-scope="progress"][data-part="label"]`	The optional label.
`value-text`	`[data-scope="progress"][data-part="value-text"]`	The formatted value text.
`track`	`[data-scope="progress"][data-part="track"]`	The linear track behind the fill.
`range`	`[data-scope="progress"][data-part="range"]`	The filled portion of the linear track.
`circle`	`[data-scope="progress"][data-part="circle"]`	The circular SVG ring.
`circle-track`	`[data-scope="progress"][data-part="circle-track"]`	The circular ring background.
`circle-range`	`[data-scope="progress"][data-part="circle-range"]`	The filled arc of the ring.
`circle-text`	`[data-scope="progress"][data-part="circle-text"]`	The percentage shown inside the ring.

Tokens

Token	Controls
`--manti-progress-track-height`	track height
`--manti-progress-circle-size`	circle size
`--manti-progress-circle-thickness`	circle thickness

Last updated 13 September 2026