Cart Drawer
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/order-summaryOrder Summary
The checkout sidebar. Line items carry quantity badges on their photos, a discount code field checks codes through your handler and shows the one applied as a removable tag (one per order; a bad code shakes), shipping methods are radio cards with arrival dates that turn free above a threshold, and totals roll digit by digit. On phones it folds behind a "Show order summary" bar.
Props
Other props pass through to the root element.
lines*
OrderLine[]
shippingMethods
ShippingMethod[]
Default
[]shippingMethod
string
defaultShippingMethod
string
onShippingMethodChange
(id: string) => void
discount
OrderDiscount | null
defaultDiscount
OrderDiscount | null
Default
nullonDiscountChange
(discount: OrderDiscount | null) => void
onApplyCode
(code: string) => OrderDiscount | null | Promise<OrderDiscount | null>
Checks a code. Return the discount it gives, or
nullwhen it isn't valid. Throw anErrorto show its message instead (for "This code has expired"). Leave out to hide the code field.taxRate
number
Estimated tax as a fraction of the discounted subtotal, e.g. 0.08. Leave out to show "Calculated at next step".
currency
string
Default
"USD"locale
string
Default
"en-US"collapsible
"mobile" | "always" | "never"
Default
"mobile"mobile(default) folds the summary behind a "Show order summary" bar below 1024px wide, as checkouts do when the summary sits above the form.alwaysfolds it at every width;neverkeeps it open.defaultExpanded
boolean
Default
falseStart unfolded where it can fold.
title
React.ReactNode
Default
"Order summary"
| Description | |||
|---|---|---|---|
| lines* | OrderLine[] | – | |
| shippingMethods | ShippingMethod[] | [] | |
| shippingMethod | string | – | |
| defaultShippingMethod | string | – | |
| onShippingMethodChange | (id: string) => void | – | |
| discount | OrderDiscount | null | – | |
| defaultDiscount | OrderDiscount | null | null | |
| onDiscountChange | (discount: OrderDiscount | null) => void | – | |
| onApplyCode | (code: string) => OrderDiscount | null | Promise<OrderDiscount | null> | – | Checks a code. Return the discount it gives, or |
| taxRate | number | – | Estimated tax as a fraction of the discounted subtotal, e.g. 0.08. Leave out to show "Calculated at next step". |
| currency | string | "USD" | |
| locale | string | "en-US" | |
| collapsible | "mobile" | "always" | "never" | "mobile" |
|
| defaultExpanded | boolean | false | Start unfolded where it can fold. |
| title | React.ReactNode | "Order summary" |
