Progress

Show completion or step progress.

Progress bar

mdx

<Progress value={75} label="completion" />

completion

mdx

<Progress value={50} size="sm" />
<Progress value={50} size="md" />
<Progress value={50} size="lg" />

Show multi-step progress:

mdx

<ProgressSteps current={2} total={4} />

mdx

<ProgressSteps
  current={1}
  total={3}
  labels={["setup", "configure", "deploy"]}
/>

configure

prop	type	default	description
value	number	-	Current value
max	number	100	Maximum value
label	string	-	Optional label
size	"sm" \| "md" \| "lg"	"md"	Bar height

prop	type	default	description
current	number	-	Current step (0-indexed)
total	number	-	Total steps
labels	string[]	-	Step labels

Show completion or step progress.

mdx

<Progress value={75} label="completion" />

completion

mdx

<Progress value={50} size="sm" />
<Progress value={50} size="md" />
<Progress value={50} size="lg" />

Show multi-step progress:

mdx

<ProgressSteps current={2} total={4} />

mdx

<ProgressSteps
  current={1}
  total={3}
  labels={["setup", "configure", "deploy"]}
/>

configure

prop	type	default	description
value	number	-	Current value
max	number	100	Maximum value
label	string	-	Optional label
size	"sm" \| "md" \| "lg"	"md"	Bar height

prop	type	default	description
current	number	-	Current step (0-indexed)
total	number	-	Total steps
labels	string[]	-	Step labels