Checkout Stepper
- from @ecomcn
- by ecomcn <hello@ecomcn.dev>
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.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @ecomcn/checkout-stepperLive preview
No live preview has been built for this component yet.
Registry dependencies0
The CLI adds no other registry items with this one.