Components
Loading preview...
The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as forms, onboarding flows, or confirmations, clearly indicating progress with labels like “Step 1: Fill Info → Step 2: Confirm → Step 3: Done.” The button supports configurable sizes (sm, md, lg) and seamlessly handles clicks to advance through steps, offering an intuitive and visually clear user experience. Its design leverages shadcn/ui primitives, ensuring accessibility, smooth transitions, and a modern, cohesive look in any interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/multi-step-buttonimport MultiStepButton from "@/components/ui/multi-step-button";
export default function DemoMultiStepButton() {
const steps = [
"Step 1: Fill Info",
"Step 2: Confirm",
"Step 3: Done"
];
return (
<div className="flex gap-4">
<MultiStepButton steps={steps} />
</div>
);
}