# Stepper

A step indicator for series and multi-step paths, as dots or a list, with optional links.

- **Use it for**: Showing position in a multi-step flow.
- **Not for**: A hierarchy of pages. Try [Breadcrumb](https://unseenui.com/components/breadcrumb/), [Progress](https://unseenui.com/components/progress/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Stepper } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Stepper label="Series parts" steps={steps} reading previous={{ href: prev }} next={{ href: next }} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `as` | `"div" \| "nav"` | A navigation landmark, or a plain list for hosts that already sit inside one. |
| `label` (required) | `string` | Names the navigation landmark, for example "Series parts". |
| `next` | `StepperLink` |  |
| `presentation` | `"list" \| "dots" \| "segments"` | Dots keep labels for assistive technology; list prints them; segments are equal-width bars that share the row. |
| `previous` | `StepperLink` |  |
| `reading` | `boolean \| ((current: number, total: number) => ReactNode)` | Prints "Step 2 of 9" from the current step; pass a string to override the words. |
| `steps` (required) | `readonly StepperStep[]` |  |
| `tooltip` | `boolean` | Dots only: shows the step label above the dot on hover and keyboard focus. |

## Keyboard

Steps with destinations are ordinary links in a navigation landmark; dots carry their labels for assistive technology.

## Works with

[CommandPalette](https://unseenui.com/components/command-palette/), [TableOfContents](https://unseenui.com/components/table-of-contents/), [Breadcrumb](https://unseenui.com/components/breadcrumb/), [Tabs](https://unseenui.com/components/tabs/), [Pagination](https://unseenui.com/components/pagination/), [DropdownMenu](https://unseenui.com/components/dropdown-menu/), [ContextMenu](https://unseenui.com/components/context-menu/), [NavigationMenu](https://unseenui.com/components/navigation-menu/), [Sidebar](https://unseenui.com/components/sidebar/), [ShareMenu](https://unseenui.com/components/share-menu/)

Page: https://unseenui.com/components/stepper/