Steppernavigation
Progress steps that are horizontal on wide screens and vertical on mobile, with complete, current, upcoming, skipped and error states and optional links.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/stepperDefault
stepper-demo.tsx
import { Stepper } from "@/components/ui/stepper";
const steps = [ { key: "details", label: "Details", description: "Guest and dates" }, { key: "payment", label: "Payment" }, { key: "review", label: "Review" }, { key: "done", label: "Done" },];
export default function StepperDemo() { return <Stepper steps={steps} current="payment" />;}