All componentssolidsubtlexssmmdlg
Steps
Multi-step progress with numbered indicators, completion checks, and connecting separators.
Variants
Sizes
Install
zsh — steps
1bunx stylexblocks add stepsUsage — Base UI
steps.tsx
1234567891011121314151617181920212223import { Steps } from "#components/ui/base-ui/steps.tsx";
const steps = ["Account", "Details", "Review"];
export function Example() { return ( // Base UI has no steps machine; the component carries the controlled // step itself — step/defaultStep/onStepChange, parts via useRender <Steps.Root count={steps.length} defaultStep={1} size="md"> <Steps.List> {steps.map((title, index) => ( <Steps.Item key={title} index={index}> <Steps.Trigger> <Steps.Indicator>{index + 1}</Steps.Indicator> <Steps.Title>{title}</Steps.Title> </Steps.Trigger> <Steps.Separator /> </Steps.Item> ))} </Steps.List> </Steps.Root> );}