---
title: Step progress
description: A thin bar of segments for a short flow of steps.
---

```tsx
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](/deft/components/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `count?` | `number` | - | Number of steps. |
| `current?` | `number` | - | The current step, starting at 1. |

Parts: `Root`. Built on Base UI [Progress](https://base-ui.com/react/components/progress).