Components
Loading preview...
Stepper
npx shadcn@latest add https://21st.dev/r/originui/stepperimport {
Stepper,
StepperIndicator,
StepperItem,
StepperSeparator,
StepperTrigger,
} from "@/components/ui/stepper";
import { Shuffle } from "lucide-react";
function Component() {
return (
<div className="mx-auto max-w-xl space-y-8 text-center min-w-[300px]">
<Stepper defaultValue={2}>
<StepperItem step={1} className="[&:not(:last-child)]:flex-1">
<StepperTrigger>
<StepperIndicator asChild>
<img
className="rounded-full"
src="https://originui.com/avatar-40-05.jpg"
width={32}
height={32}
alt="Mike Palmer"
/>
</StepperIndicator>
</StepperTrigger>
<StepperSeparator />
</StepperItem>
<StepperItem step={2} className="[&:not(:last-child)]:flex-1" loading>
<StepperTrigger>
<StepperIndicator />
</StepperTrigger>
<StepperSeparator />
</StepperItem>
<StepperItem step={3} className="[&:not(:last-child)]:flex-1">
<StepperTrigger>
<StepperIndicator asChild>
<Shuffle size={14} strokeWidth={2} aria-hidden="true" />
<span className="sr-only">Shuffle</span>
</StepperIndicator>
</StepperTrigger>
</StepperItem>
</Stepper>
<p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
Stepper with mixed elements
</p>
</div>
);
}
export { Component };