Hewn
Components

Components

Stepper

Multi-step progress indicator with horizontal and vertical orientations.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add stepper

Stepper tracks wizard progress with complete, current, upcoming, error, and optional states. Pair it with useStepper for controlled flows.

Usage

TSX
import { Stepper, StepperStep, useStepper } from "@hewnui/ui";

const { currentIndex, goTo, next, previous } = useStepper({ count: 3 });

<Stepper currentIndex={currentIndex} onStepChange={goTo}>
  <StepperStep description="Name and owners">Account</StepperStep>
  <StepperStep>Details</StepperStep>
  <StepperStep isOptional>Review</StepperStep>
</Stepper>

States

  • Complete, current, upcoming (derived or explicit)
  • Error — alert glyph in the indicator
  • Optional — dashed indicator + Optional label

Accessibility

  • Navigation landmark with an accessible name
  • Current step exposes aria-current="step"
  • Indicators are presentational; titles provide the accessible name
  • Clickable completed steps are real buttons with 40×40 indicators and press scale
  • Connectors are aria-hidden

API reference

Props for Stepper from @hewnui/ui/stepper. Generated from component types — not hand-written.

Prop

Type

CommandPalette

Modal ⌘K command finder with grouped actions, shortcuts, and async loading.

Themes

Curated theme packs with intentional light and dark modes.

On this page

UsageStatesAccessibility