Back to components

Cart

Cart Summary

A cart totals panel: subtotal, an optional total, a taxes-and-shipping note, and a checkout button.

money
totals
checkout

Preview

Subtotal$129.00
Total$139.32

Taxes and shipping calculated at checkout.

Installation

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add cart-summary

Usage

Import
import { CartSummary } from "@/components/lumo/cart-summary"
Example
<CartSummary
  subtotal={{ amount: 12900, currency: "USD" }}
  onCheckout={() => router.push("/checkout")}
/>

Props

PropTypeDefaultRequired
subtotalMoney-
Required
totalMoney-
onCheckout() => void-
checkoutLabelstring"Checkout"
disabledboolean-
noteReactNode-
localestring-

All props accept standard HTML attributes unless otherwise specified.

Dependencies

Lumo blocks

  • lib

Own every line

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.