Step progress

A thin bar of segments for a short flow of steps.

import { StepProgress } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StepProgressBasic() {
  return (
    <Preview stack={true}>
      <StepProgress.Root count={3} current={2} />
    </Preview>
  );
}

• Use it at the top of a card for a flow of two to four steps, such as onboarding or connecting an app. On a Standalone page it sits between Header and Body.
• Filled segments are done or current.
• Leave the step count out of the visible copy: the bar announces “Step 2 of 3” to screen readers.

API

Parts: Root. Built on Base UI Progress.