Components
Loading preview...
Stepper
npx shadcn@latest add https://21st.dev/r/originui/stepperimport {
Stepper,
StepperIndicator,
StepperItem,
StepperTitle,
StepperTrigger,
} from "@/components/ui/stepper";
const steps = [
{
step: 1,
title: "Step One",
},
{
step: 2,
title: "Step Two",
},
{
step: 3,
title: "Step Three",
},
{
step: 4,
title: "Step Four",
},
];
function Component() {
return (
<div className="mx-auto max-w-xl space-y-8 text-center min-w-[400px]">
<Stepper defaultValue={2} className="items-start gap-4">
{steps.map(({ step, title }) => (
<StepperItem key={step} step={step} className="flex-1">
<StepperTrigger className="w-full flex-col items-start gap-2">
<StepperIndicator asChild className="h-1 w-full bg-border">
<span className="sr-only">{step}</span>
</StepperIndicator>
<div className="space-y-0.5">
<StepperTitle>{title}</StepperTitle>
</div>
</StepperTrigger>
</StepperItem>
))}
</Stepper>
<p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Stepper with labels
</p>
</div>
);
}
export { Component };