Components
Loading preview...
Stepper
npx shadcn@latest add https://21st.dev/r/originui/stepperimport {
Stepper,
StepperIndicator,
StepperItem,
StepperSeparator,
StepperTrigger,
} from "@/components/ui/stepper";
const steps = [1, 2, 3, 4];
function Component() {
return (
<div className="space-y-8 text-center min-w-[300px]">
<Stepper defaultValue={2} orientation="vertical">
{steps.map((step) => (
<StepperItem key={step} step={step} className="[&:not(:last-child)]:flex-1">
<StepperTrigger>
<StepperIndicator />
</StepperTrigger>
{step < steps.length && <StepperSeparator />}
</StepperItem>
))}
</Stepper>
<p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Vertical stepper with numbers and checkmarks
</p>
</div>
);
}
export { Component };