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="mx-auto max-w-xl space-y-8 text-center min-w-[300px]">
<Stepper defaultValue={2}>
{steps.map((step) => (
<StepperItem key={step} step={step} className="[&:not(:last-child)]:flex-1">
<StepperTrigger>
<StepperIndicator className="size-4 data-[state=active]:border-2 data-[state=active]:border-primary data-[state=active]:bg-transparent [&_span]:sr-only [&_svg]:size-3" />
</StepperTrigger>
{step < steps.length && <StepperSeparator />}
</StepperItem>
))}
</Stepper>
<p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Stepper with tiny buttons and checkmarks
</p>
</div>
);
}
export { Component };