Checkout

Classic single-page checkout built with shadcn/ui. The left column holds contact, a shipping address grid with Input, Label and a country Select, delivery and payment RadioGroups with inline card fields; the right column is a sticky order summary Card with product thumbnails, promo code Input, totals and a Pay button. A dependable default for any store.

Four-step checkout (Information, Shipping, Payment, Review) driven by a horizontal numbered stepper of clickable shadcn/ui Buttons joined by progress lines. One step renders at a time with Back/Continue controls, a compact summary Card sits on the right and the Review step lists everything as read-only rows with Edit links that jump back to a step.

Checkout as a vertical shadcn/ui Accordion where Contact & address, Delivery and Payment are single-open items controlled by state. Closed steps show a one-line summary in their trigger, each panel ends with a Continue Button that opens the next, and the order summary with Separators sits beside it on desktop and below on mobile.

Express-first checkout using shadcn/ui Buttons for three wallet options (Express wallet, Pay in 3, Bank transfer) above an "or continue below" Separator divider and a compact contact, address and card form. The order summary Card hides its line items behind a Collapsible "Show 3 items" trigger and includes a Pay in 3 explainer.

Checkout entry with a two-trigger shadcn/ui Tabs: the Guest tab shows email, newsletter Checkbox and a full shipping address form with country Select, while the Sign in tab shows email, password, a Continue Button and a note about saved addresses and loyalty points. The order summary Card with a member-points callout stays on the right.

Narrow max-w-lg checkout that mirrors a mobile flow: a Collapsible order summary header with ChevronDown and total at the top, stacked Contact, Shipping, Delivery and Payment sections divided by shadcn/ui Separators, pill-style payment RadioGroup, and a sticky bottom bar with the total and Pay Button.

Two equal columns built with shadcn/ui: the form on the left (Input, Label, Select, delivery RadioGroup, card fields and a billing Checkbox) and a full-height muted panel on the right with large product thumbnails, a delivery estimate that reacts to the chosen speed, totals and a ShieldCheck, Truck and RotateCcw trust row.

Four-column layout where the left column is a vertical list of clickable numbered steps (current highlighted, completed marked with Check) and the remaining three columns show one shadcn/ui Card per step with Prev/Next Buttons. The order summary is a slim row of overlapping thumbnails, item count and total under the page title.

Payment step built with shadcn/ui: shipping is condensed into a completed summary Card with an Edit link, payment methods are a vertical RadioGroup of selectable Cards with icon and description where the selected one gets a primary border, the card form appears under the Card option and a billing-same-as-shipping Checkbox reveals billing fields when unchecked. Summary on the right.

Final review page using a shadcn/ui Table for line items, a three-column row of Shipping, Delivery and Payment summary Cards each with an Edit CardAction, a terms Checkbox, a Place order Button and a numbered "What happens next" list with Separator and support email. Ideal as the last step before payment is captured.