# Stepper

> Step 1-N indicator for multi-stage flows.

Source: https://ui.jcsoftdev.com/docs/components/stepper

Step 1-N indicator for multi-stage flows.

## Import

```ts
import { Stepper } from "@jcsoftdev/ui/navigation";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/navigation/stepper`.

## Usage

```tsx
<Stepper steps={steps} currentStepId="barbero" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` * | `Step[]` |  |  |
| `currentStepId` * | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/navigation-stepper--default)
- [First Step](/storybook/?path=/story/navigation-stepper--first-step)
- [Last Step](/storybook/?path=/story/navigation-stepper--last-step)
- [Three Steps](/storybook/?path=/story/navigation-stepper--three-steps)
- [Narrow](/storybook/?path=/story/navigation-stepper--narrow)

## Source

`packages/ui/src/navigation/stepper/stepper.tsx`