Stepper ported

Progress you can point at.

Show where a person is in a multi-step flow and what is done.

Live specimen

Loading demo…

Guidance

When to use

Onboarding, checkout, and setup flows where the person needs to see the path.
When completed steps should be revisitable by click or keyboard.
Horizontal above the step content, or vertical beside it.

When not to use

For an unknown-length task — use Progress.
For a single action — use a Button.
When the steps are not sequential — use Tabs.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
  import { Stepper } from '$lib/components/stepper';

  const steps = [
    { id: 'account', label: 'Account' },
    { id: 'profile', label: 'Profile' },
    { id: 'review', label: 'Review' }
  ];
  let current = $state(0);
</script>

<Stepper {steps} {current} onStepSelect={(i) => (current = i)} />

API Reference

Prop	Type	Default	Description
`steps`	`StepperStep[]`	—	The steps: id, label, optional description and error.
`current`	`number`	—	Index of the step in progress; steps.length means complete.
`orientation`	`'horizontal' \| 'vertical'`	'horizontal'	Layout direction.
`onStepSelect`	`(index: number) => void`	—	Called for a completed step; without it the stepper is read-only.
`details`	`'all' \| 'current'`	'all'	Show every description, or only the active step’s.
`compact`	`boolean`	false	Markers only; labels stay for assistive tech.
`label`	`string`	'Progress'	Accessible name.
`completeLabel`	`string`	'All steps complete'	Shown/announced when every step is done.

Keyboard Interactions

Key	Action
`Arrow keys`	Move between reachable steps (interactive mode).
`Home / End`	Jump to the first / current reachable step.
`Enter / Space`	Return to a completed step.

Accessibility

Interactive mode is a nav; read-only mode is a group, both labelled.
The current step is aria-current="step"; each step’s state is spoken (Completed, Not started, Error).
A polite live region announces the current step; errors use the danger colour and a label.

Motion

Phase 1 still-state: statuses, glyphs, connector fills, and the caption render statically. Phase 2 wires the glyph pop and check draw, the connector spring, the current-step ring, and the text-swap height animation. Reduced motion keeps the end states.

Notes for AI

Set `current` to steps.length to mark the flow complete.
Provide `onStepSelect` only when completed steps should be revisitable.
An `error` on a step morphs its marker and shows the message instead of the description.

Source of truth: registry/components/stepper/stepper.tsx