Stepper

A multi-step progress indicator that guides users through a sequence of steps.

Import

tsx

import { Stepper, Step } from '@tac-ui/web';

Playground

Interactively configure the Stepper props below.

Account

Create your account

Profile

Set up your profile

Review

Review and confirm

Done

All finished

Current Step

Orientation

tsx

<Stepper activeStep={1} orientation="horizontal">
  <Step title="Account" description="Create your account" />
  <Step title="Profile" description="Set up your profile" />
  <Step title="Review" description="Review and confirm" />
  <Step title="Done" description="All finished" />
</Stepper>

Horizontal

The default horizontal layout renders step circles connected by animated progress bars, with labels below. Steps before activeStep show a checkmark; the active step is highlighted with a ring.

Account

Create your account

Profile

Set up your profile

Review

Review and confirm

tsx

<Stepper activeStep={1} orientation="horizontal">
  <Step title="Account" description="Create your account" />
  <Step title="Profile" description="Set up your profile" />
  <Step title="Review" description="Review and confirm" />
</Stepper>

Vertical

In vertical orientation, steps are stacked with a connecting animated line between each step circle. This layout suits narrow containers and order-tracking flows.

Order placedWe have received your order

ProcessingYour order is being prepared

ShippedYour order is on the way

DeliveredYour order has been delivered

tsx

<Stepper activeStep={2} orientation="vertical">
  <Step title="Order placed" description="We have received your order" />
  <Step title="Processing" description="Your order is being prepared" />
  <Step title="Shipped" description="Your order is on the way" />
  <Step title="Delivered" description="Your order has been delivered" />
</Stepper>

Center Aligned Labels

Set alignLabels="center" to center all step labels beneath their circles, instead of the default edge alignment where the first label is left-aligned and the last is right-aligned.

Account

Create your account

Profile

Set up your profile

Review

Review and confirm

tsx

<Stepper activeStep={1} alignLabels="center">
  <Step title="Account" description="Create your account" />
  <Step title="Profile" description="Set up your profile" />
  <Step title="Review" description="Review and confirm" />
</Stepper>

With Icons

Pass a React node to the icon prop on each Step to replace the default step number with a custom icon. Completed steps always show a checkmark regardless of the icon prop.

Account

Create your account

Settings

Configure preferences

Complete

All done

tsx

<Stepper activeStep={1} orientation="horizontal">
  <Step title="Account" description="Create your account" icon={<User />} />
  <Step title="Settings" description="Configure preferences" icon={<Settings />} />
  <Step title="Complete" description="All done" icon={<CheckCircle />} />
</Stepper>

Vertical with Icons

Icons work with vertical orientation too, useful for timeline or order-tracking flows with semantic icon indicators at each step.

Order placedWe have received your order

ShippedYour order is on the way

DeliveredYour order has been delivered

tsx

<Stepper activeStep={2} orientation="vertical">
  <Step title="Order placed" description="We have received your order" icon={<Package />} />
  <Step title="Shipped" description="Your order is on the way" icon={<Truck />} />
  <Step title="Delivered" description="Your order has been delivered" icon={<MapPin />} />
</Stepper>

API Reference

Stepper props:

Prop	Type	Default	Description
activeStep	number	-	Zero-based index of the currently active step. Steps before this index are shown as completed.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction of the stepper.
alignLabels	"edge" \| "center"	"edge"	Label alignment for horizontal layout. Edge aligns first label left and last label right; center aligns all labels centrally.
className	string	-	Additional CSS class names.
children	React.ReactNode	-	One or more Step components.

Step props:

Prop	Type	Default	Description
title	string	-	Step title text displayed below the circle (horizontal) or beside it (vertical).
description	string	-	Optional supporting text displayed below the title.
icon	React.ReactNode	-	Custom icon displayed in the step circle instead of the step number. Overridden by a checkmark when the step is completed.
status	"completed" \| "active" \| "pending"	-	Override the step's visual state. Defaults to auto-detection from activeStep.
className	string	-	Additional CSS class names.