Steps
Indicate progress through numbered steps in multi-step workflows.
Source
Theme source
@saas-ui/core
- 2.11.4 (latest)
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?