The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.

WebBetaNavigation

Web only — React, from @krizaka/ui/stepper. Beta: its API may still change in a minor version.

When to use

A job the user follows in steps: an upload that is checked, transcoded and published; a payout; an import.
A short journey with a known order: a checkout, an onboarding (orientation="horizontal").
A history of what happened, in order (a timeline of a request).

When not to use

For one task with a known size and no steps.Use instead: Progress
To switch between views the user can visit in any order.Use instead: Tabs

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Stepper } from "@krizaka/ui/stepper";

Examples

A job in steps

Uploaded, checked, transcoding (traced, with its Progress and ETA), then published.

Uploaded — Done
1.2 GB in 48 s
Checked — Done
Format, rights, safety
Transcoding — In progress
4K, 1080p, 720p
Published — Upcoming
Visible to your supporters

A failed step

A cross, the danger colour, “Failed” in words — and the action that fixes it.

Requested — Done
€1,240.00
Bank transfer — Failed
The bank refused the account number
Received — Upcoming

A short journey

orientation="horizontal": the connectors fill as it advances.

Plan — Done
Payment — Current step
Confirmation — Upcoming

Props

An ordered list of steps: aria-current="step" on the current one, each state said in words.

Prop	Type	Default	Description
`labels`required	`Readonly<Record<StepStatus, string>>`	—	What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated.
`steps`required	`readonly Step[]`	—	The steps, in order.
`current`	`number`	`0`	The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins).
`orientation`	`"horizontal" \| "vertical"`	`vertical`	vertical (a job, a timeline) · horizontal (a short journey, a checkout).

Accessibility

An ordered list (name it with aria-label); the current step has aria-current="step".
Each step's state is read with its title (labels, translated): never colour alone.
Under prefers-reduced-motion the current glyph rests on a still frame and the connectors do not animate.

Best practices

Name steps by what happens (“Transcoding”), with a line of detail (a size, a time).
Put what the user can do or watch into the current or failed step's content: a Progress with its ETA, a retry.
A failure says what went wrong and what to do next, in the step itself.

Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Stepper