# Stepper

> A multi-step progress indicator where each step derives its own number and status — done, current, or upcoming — from its position in the sequence.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: stepper, steps, wizard, progress, compound, navigation
- Docs: https://fancy-ui.rama.app/docs/components/stepper
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/stepper

## Import

```svelte
<script lang="ts">
  import { Stepper } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Stepper } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `current` | `number` | `0` | The active step's 0-based index. Bindable. |
| `onCurrentChange` | `(current: number) => void` | — | Called with the new index whenever it changes, however the change happened. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The rail's stacking axis. |
| `clickable` | `boolean` | `false` | Whether steps render as buttons a reader can click to jump between them. |
| `onStepClick` | `(index: number) => void` | — | Called with a step's index when it's activated by a click. Only fires when clickable. |
| `class` | `string` | — | Additional CSS classes, merged onto the root. |
| `ref` | `HTMLOListElement \| null` | `null` | Bindable reference to the root element. |
| `sound` | `boolean` | `false` | Plays select when a clickable step changes the current step, once the user has enabled sound |
| `Step.label` (required) | `string` | — | The step's primary label. |
| `Step.description` | `string` | — | Optional secondary line shown under the label. |
| `Step.class` | `string` | — | Additional CSS classes, merged onto the step's li. |
| `Step.ref` | `HTMLLIElement \| null` | `null` | Bindable reference to the step's li element. |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The Steps. |
| `Step.children` | Overrides the bullet's default content (checkmark / number / outline). |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Stepper, Step } from "fancy-ui-svelte";

	let current = $state(1);
</script>

<Stepper bind:current>
	<Step label="Account" />
	<Step label="Profile" />
	<Step label="Confirmation" />
</Stepper>
```

### Vertical Stepper

Stacked in a column instead of a horizontal row.

```svelte
<script lang="ts">
	import { Stepper, Step } from "fancy-ui-svelte";

	let current = $state(1);
</script>

<Stepper bind:current orientation="vertical" class="max-w-xs">
	<Step label="Account" />
	<Step label="Profile" />
	<Step label="Confirmation" />
</Stepper>
```

### Clickable Steps

Steps render as buttons a reader can click to jump between them.

```svelte
<script lang="ts">
	import { Stepper, Step } from "fancy-ui-svelte";

	let current = $state(0);
	let lastClicked = $state<number | null>(null);

	function onStepClick(index: number) {
		lastClicked = index;
	}
</script>

<div class="flex flex-col items-start gap-2">
	<Stepper sound bind:current clickable {onStepClick}>
		<Step label="Account" />
		<Step label="Profile" />
		<Step label="Confirmation" />
	</Stepper>
	{#if lastClicked !== null}
		<p class="text-muted-foreground text-sm">Jumped to step {lastClicked + 1}.</p>
	{/if}
</div>
```

### With Descriptions

A secondary line under each step's label.

```svelte
<script lang="ts">
	import { Stepper, Step } from "fancy-ui-svelte";

	let current = $state(1);
</script>

<Stepper bind:current orientation="vertical" class="max-w-sm">
	<Step label="Account" description="Create your login" />
	<Step label="Profile" description="Tell us about yourself" />
	<Step label="Confirmation" description="Review and finish" />
</Stepper>
```