# Steps

Wizard step indicator where finishing a step closes its ring, draws a check and fills the line to the next marker. Also comes as compact page dots.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/steps
```

## Import

```tsx
import { Steps } from "@/components/ui/steps/steps";
```

## Variants

- `dots` — Dots: `npx @lumioui/cli add pro/steps-dots`
- `numbered` — Numbered: `npx @lumioui/cli add pro/steps-numbered`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `steps` | `string[] | StepsItem[]` | Steps to display — strings or { label } objects. |
| `current?` | `number` | Controlled current index (0-based). |
| `defaultCurrent?` | `number` | Uncontrolled starting index. Default 0. |
| `onCurrentChange?` | `(index: number) => void` | Fired when a step is tapped (controlled or uncontrolled). |
| `variant?` | `"numbered" | "dots"` | "numbered" = numbered circles with a check on done; "dots" = compact dots. |
| `labels?` | `boolean` | Labels under the markers. Default true for "numbered", false for "dots". |
| `interactive?` | `boolean` | Tappable steps. Default true. |
| `haptic?` | `"selection" | "light" | false` | Haptic on step change. Default "selection". |
| `className?` | `string` | — |

Source: https://lumioui.com/components/steps