1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability
1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability
1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app
shadcnregistry
shadcnregistry
RegistryHealthInspect
Terms of ServicePrivacy Policy
  1. Registries
  2. ecomcn
  3. Checkout Stepper

Checkout Stepper

component

Where the shopper is in checkout: a rail of equal ruled cells, edge to edge. Done steps carry a check and are buttons back to them; the current step is aria-current="step"; steps to come are not clickable. Never colour alone — a check, a number, and a heavy rule under the current step that slides on as the shopper moves (Motion; a fade under reduced motion). On a phone the rail shows numbers, with the step named below it.

pnpm dlx shadcn@latest add "https://ecomcn.vercel.app/r/checkout-stepper.json"
Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore
  • motion
  • lucide-react
    components/ecomcn/checkout-stepper.tsx