Checkout 5 - Split screen with editable summary sidebarPro
A full-bleed split checkout: a compact form column on the left and an edge-to-edge muted summary sidebar on the right with quantity steppers, a working discount code and live totals. Use it for stores that want buyers to adjust the cart without leaving checkout; card fields are placeholders.
About Checkout 5
A full-bleed split checkout: a compact form column on the left and an edge-to-edge muted summary sidebar on the right with quantity steppers, a working discount code and live totals. Use it for stores that want buyers to adjust the cart without leaving checkout; card fields are placeholders.
Checkout 5 is a checkout block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 113 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
- one page
- summary
- discount code
- quantity
- ecommerce
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add checkout-05Dependencies installed automatically: lucide-react.
Uses: button, input, label, reveal, separator, utils.
Usage
import Checkout05 from "@/components/blocks/checkout-05"
export default function Page() {
return <Checkout05 />
}