Lucent UI
← FilterDateRangeStepperProfileCard →
✦ LLM-ready

Stepper

molecule

Step indicator for multi-step flows — onboarding wizards, checkout funnels, and setup sequences. Horizontal or vertical orientation with animated checkmark on completion, numbered step labels, status badges, and custom per-step icons.

"Add a Stepper from lucent-ui for a multi-step onboarding flow. Use steps array with current index. Show horizontal orientation with animated checkmarks."

Usage

React / JSX
import { Stepper } from 'lucent-ui'

<Stepper orientation="horizontal" size="md"
  steps={["Account", "Profile", "Review", "Confirm"]}
  current={1} />

Installation

pnpm add lucent-ui

API Reference

Stepper props — * required

PropTypeDefaultDescription
steps*string[] | StepDef[]—Array of step labels (strings) or objects with { label, description?, icon? }.
current*number—Zero-based index of the active step.
orientation"horizontal" | "vertical""horizontal"Layout direction.
size"sm" | "md" | "lg""md"Circle and text size scale.
numberedbooleanfalseShow STEP N prefix above each label.
showStatusbooleanfalseShow Chip status badges (Completed / In Progress / Pending).