Back to Components
Components

Checkout Summary

Order totals panel with items list, subtotal, shipping, tax, discount line, promo input, and checkout call to action.

Order summary

Review your totals before placing the order.

Items3 items
  • Nimbus Travel Backpack

    Qty 1

    $89.00
  • Everyday Cotton Tee

    Qty 2

    $32.00
  • Steel Water Bottle

    Qty 1

    $24.00
Subtotal$148.00
Shipping$12.00
Tax$18.50
Discount-$10.00
Total$168.50

Shipping calculated at checkout.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/checkout-summary.tsx

Installation

Using shadcn CLI

npx shadcn add checkout-summary --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge