Order Summary

Pro

Checkout totals with subtotal, discount, shipping and tax, and a big total that counts to each new value. Applied promo codes show as removable chips.

Preview

Installation

npx @lumioui/cli add pro/order-summary

Usage

import { OrderSummary } from "@/components/ui/order-summary/order-summary";
<OrderSummary />

Examples

Booking

The price breakdown before booking a stay, teal.

Checkout

The review step of a home-goods checkout, green.

API reference

OrderSummary

Prop Type Default
format FormatPriceOptions

Money formatting shared by every row and the total.

 —
title string

Optional heading — "Order summary".

 —
savingsLight boolean

A saving performs: a discount row that arrives holds lit in the accent while the total rolls down per digit, then the total line sheens. Default false (the total counts on a spring).

 —
className string —
children React.ReactNode —

OrderSummaryRow

Prop Type Default
label* string

Left label — "Subtotal", "Shipping", "Estimated tax".

 —
amount number

Amount in major units. Negative for discounts/credits. Omit with value for text.

 —
value string

Text instead of an amount — "Calculated at next step".

 —
hint string

Second line under the label — "Standard · 3–5 business days".

 —
tone "default" | "discount" | "muted"

"discount" renders the amount in the success colour; "muted" dims the whole row. Default "default".

 —
badge string

Small code chip after the label, e.g. the promo code that produced a discount.

 —
freeLabel string

Label shown when amount is 0. Default "Free".

 —
onInfoPress () => void

Info-glyph press handler (tax / fee explanation).

 —
className string —

OrderSummaryTotal

Prop Type Default
amount* number

Total in major units — counts to each new value.

 —
label string

Label. Default "Total".

 —
note string

Small line under the label — "Including $18.40 in taxes", "USD".

 —
separator boolean

Draw the hairline above the total. Default true.

 —
size "md" | "hero"

"md" — 24pt figure (default). "hero" — 34pt with the cents set smaller.

 —
className string —

OrderSummaryPromo

Prop Type Default
onApply*
(code: string) => boolean | string … (code: string) => boolean | string | Promise<boolean | string>

Validate + apply a code. Return true (or resolve true) to accept; return a string to reject with that message; false rejects with invalidMessage.

 —
appliedCode string | null

The code currently applied (controlled by the parent). null/undefined = none.

 —
onRemoveCode () => void

Remove the applied code.

 —
savings string

Savings shown on the applied chip, e.g. "−$24.00".

 —
label string

Collapsed link label. Default "Add promo code".

 —
placeholder string

Field placeholder. Default "Promo code".

 —
invalidMessage string

Message when onApply returns false. Default "That code isn't valid".

 —
defaultOpen boolean

Start with the field open. Default false.

 —
className string —