Component

Steps

A composable step indicator for multi-stage flows like checkout, onboarding, or wizards. Built from Step, StepIndicator, and content parts.

Vertical

The default orientation. Each step carries a status that styles its indicator.

✓

Account

Shipping

Where should we deliver your order?

Payment

Review your order and pay securely.

Installation

$pnpm add @refraction-ui/react-steps

Usage

tsx

import {
  Steps,
  Step,
  StepIndicator,
  StepContent,
  StepTitle,
  StepDescription,
} from '@refraction-ui/react'

export function Checkout() {
  return (
    <Steps orientation="vertical">
      <Step status="completed">
        <StepIndicator status="completed">✓</StepIndicator>
        <StepContent>
          <StepTitle>Account</StepTitle>
          <StepDescription>Sign in to get started.</StepDescription>
        </StepContent>
      </Step>
      <Step status="active">
        <StepIndicator status="active">2</StepIndicator>
        <StepContent>
          <StepTitle>Shipping</StepTitle>
          <StepDescription>Where should we deliver?</StepDescription>
        </StepContent>
      </Step>
      <Step status="upcoming">
        <StepIndicator status="upcoming">3</StepIndicator>
        <StepContent>
          <StepTitle>Payment</StepTitle>
        </StepContent>
      </Step>
    </Steps>
  )
}

Horizontal

Set orientation="horizontal" to lay steps out in a row.

✓

Account

Shipping

Payment

Steps props

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of the step list.
`className`	`string`	--	Additional CSS classes to apply to the container.

Step props

Step and StepIndicator share the same status prop. StepContent, StepTitle, and StepDescription accept standard HTML attributes.

Prop	Type	Default	Description
`status`	`'completed' \| 'active' \| 'upcoming'`	`'upcoming'`	Drives the styling of the step and its indicator (completed fills the indicator, active outlines it, upcoming is muted).
`className`	`string`	--	Additional CSS classes to apply.