Order Summary
Order summary blocks for shadcn/ui. Cart totals with line items, promo code fields, shipping and tax breakdowns, order confirmation pages, and compact summary cards. Built for shadcn/ui.
Compact order summary Card built with shadcn/ui: three line items with thumbnails and quantity bubbles, a promo code Input whose Apply button turns WELCOME10 into a removable Badge, subtotal / discount / shipping / total rows and a lock-icon Checkout Button. A Progress line at the bottom shows how close the basket is to free shipping. Drop it beside any cart or checkout form.
Thank-you page in a centred max-w-3xl column using shadcn/ui Cards, Buttons and Separators. A large CircleCheck and personal headline with the order number lead into a three-column grid of Shipping address, Delivery and Payment cards, followed by the ordered items, totals and Track order / Continue shopping Buttons. Ideal as the post-purchase landing step.
Mobile-checkout style summary where a bordered bar reading "Order summary • €336.00" with a rotating ChevronDown expands a shadcn/ui Collapsible to reveal thumbnails, quantities and VAT rows. The total, a "Shipping to" address line with Change link and a Place order Button stay visible when collapsed. Good for the top of a narrow checkout.
Receipt layout on a md:grid-cols-5 grid built with shadcn/ui. The left three columns hold a Table of Item / Qty / Price rows with a TableFooter for subtotal, shipping, VAT and total; the right Card lists order number, date, payment method and billing address with Download invoice (FileDown) and Print Buttons. Suited to order history and account pages.
Order tracking Card for shadcn/ui: a horizontal four-step tracker (Ordered → Packed → Shipped → Delivered) with two completed Check steps, a pulsing dot on the current step and connector lines, an estimated delivery banner, line items with totals and loyalty points, and a "Need help?" footer with Chat and Report an issue Buttons. Perfect for order detail and tracking pages.