All componentssolidsubtlexssmmdlg
Steps
Multi-step progress with numbered indicators, completion checks, and connecting separators.
Variants
Sizes
Install
zsh — steps
1bunx stylexblocks add stepsUsage — Ark UI
steps.tsx
123456789101112131415161718192021222324import { Steps } from "#components/ui/ark-ui/steps.tsx";
const steps = ["Account", "Details", "Review"];
export function Example() { return ( // size/variant/orientation resolve once on Root; parts inherit them via // context — step state, linearity, and keyboard come from the machine. // Indicator and separator restyle themselves per step state. <Steps.Root count={steps.length} defaultStep={1} linear={false} 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> );}