H
UI by hampton.io
Back to Components
Ecommerce

Checkout Summary

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

PropsUsage ExampleVariations

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

Related Ecommerce Components

Cart Item

Cart row with thumbnail, title, price, quantity controls, subtotal, and remove button.

Price Tag

Price display with currency symbol, strikethrough for discounts, and optional sale badge.

Product Card

E-commerce product card with image, title, price, rating stars, add-to-cart button, sale badge, and wishlist toggle.

Quantity Selector

Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.

Rating Display

Read-only star rating display with filled, empty, and half stars using inline SVG, plus optional review count.

Wishlist Button

Heart icon toggle button with filled/outline states and optional count badge.