Steps

Indicate progress through numbered steps in multi-step workflows.

Import#

  • Steps: The wrapper component provides context and state management.
  • StepsItem: Manages redering of steps and completed states.
  • StepsCompleted: The completed content.
import { Steps, StepsItem, StepsCompleted } from '@saas-ui/react'

Usage#

The Steps component is a wrapper around the Chakra UI Stepper component and makes it easier to manage state and content of the steps.

Basic#

Live edit

Vertical#

Use the orientation prop to change the stepper to a vertical layout.

Live edit

Variants#

The Saas UI theme comes with 3 variants, outline, solid and subtle.

Outline#

Live edit

Solid#

Live edit

Subtle#

Live edit

Custom steps#

Use the render prop to render custom steps.

Live edit

Responsive Mobile stepper#

Horizontal steppers will position titles below the step icon on smaller screens. If you have more then 3 steps it's recommended to use a vertical stepper instead.

Live edit

With content#

Live edit

With Vertical Content#

Live edit

Was this helpful?