Component

Stepper

A compact progress list for setup flows, review queues, and staged forms.

Preview

OKDetailsName, category, and reset rhythm.
2ReviewCheck thresholds before saving.
3PublishSend the plan to active tracking.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Stepper } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/stepper.json

Copied source import

code

import "@/styles/axie.css";import { Stepper } from "@/components/axie/stepper";

Prefer @axie/stepper? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Stepper } from "axie-ui";export function Example() {  return <Stepper current="review" items={steps} />;}

Accessibility

Mark the current step with text, not just a colored marker.
Keep completed and upcoming step labels visible.
Use ordered list semantics when the sequence is meaningful.

API Reference

Prop	Type	Default	Description
current	string	-	Current step value.
items	StepperItem[]	-	Ordered step definitions.
label	ReactNode	-	Step label.
description	ReactNode	-	Optional helper copy.