Components
Loading preview...
A step-based breadcrumb component designed for multi-step processes like checkouts, forms, or onboarding flows. It visually highlights the current step, completed steps, and upcoming steps, helping users easily track their progress.
@nextjsshop
npx shadcn@latest add https://21st.dev/r/nextjsshop/step-breadcrumbimport { Breadcrumb } from "@/components/ui/step-breadcrumb";
export default function DemoOne() {
return <Breadcrumb
steps={[
{ id: "01", name: "Cart", status: "complete" },
{ id: "02", name: "Shipping", status: "current" },
{ id: "03", name: "Payment", status: "upcoming" },
{ id: "04", name: "Confirmation", status: "upcoming" },
]}
/>;
}