Checkout 4 - Collapsing contact, shipping and payment stepsPro
A single-column checkout where Contact, Shipping and Payment are stacked sections that open one at a time, collapse to a one-line summary with an Edit link once complete, and unlock the place-order button at the end. Use it for a calm, focused checkout that still shows progress; payment fields are placeholders only.
About Checkout 4
A single-column checkout where Contact, Shipping and Payment are stacked sections that open one at a time, collapse to a one-line summary with an Edit link once complete, and unlock the place-order button at the end. Use it for a calm, focused checkout that still shows progress; payment fields are placeholders only.
Checkout 4 is a pro checkout block for React, built on shadcn/ui and Tailwind CSS. It ships as 117 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- checkout
- steps
- accordion
- shipping
- payment
- ecommerce
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/checkout-04Dependencies installed automatically: lucide-react.
Uses: button, input, label, reveal, utils.
Usage
import Checkout04 from "@/components/blocks/checkout-04"
export default function Page() {
return <Checkout04 />
}