Order Summary
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/cart-drawerCart Drawer
A slide-over shopping cart on Base UI's Drawer. The quantity minus turns into a bin at one, stock caps show "Only 2 left", and a removed line leaves an undo strip that drains away. A meter counts toward free shipping, suggestions add in one tap, and prices roll as they change. Swipe it away on touch. Also exports CartButton, a bag icon whose count pops.
Props
Other props pass through to the root element.
lines
CartLine[]
defaultLines
CartLine[]
Default
[]onLinesChange
(lines: CartLine[]) => void
trigger
React.ReactElement<Record<string, unknown>>
An element that opens the cart, such as
<CartButton />.open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
title
React.ReactNode
Default
"Your cart"currency
string
Default
"USD"locale
string
Default
"en-US"freeShippingAt
number
Subtotal that unlocks free shipping. Shows a progress meter on top; leave out to hide it.
upsells
CartUpsell[]
Default
[]Products suggested under the lines and in the empty state.
upsellTitle
React.ReactNode
Default
"Pairs well with"onCheckout
(lines: CartLine[], subtotal: number) => void | Promise<unknown>
Called with the lines and subtotal. Return a promise to show a spinner on the button until it settles.
undoSeconds
number
Default
5Seconds a removed line can be restored for.
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount inside this element instead of
<body>(a preview frame, a pane).
| Description | |||
|---|---|---|---|
| lines | CartLine[] | – | |
| defaultLines | CartLine[] | [] | |
| onLinesChange | (lines: CartLine[]) => void | – | |
| trigger | React.ReactElement<Record<string, unknown>> | – | An element that opens the cart, such as |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| title | React.ReactNode | "Your cart" | |
| currency | string | "USD" | |
| locale | string | "en-US" | |
| freeShippingAt | number | – | Subtotal that unlocks free shipping. Shows a progress meter on top; leave out to hide it. |
| upsells | CartUpsell[] | [] | Products suggested under the lines and in the empty state. |
| upsellTitle | React.ReactNode | "Pairs well with" | |
| onCheckout | (lines: CartLine[], subtotal: number) => void | Promise<unknown> | – | Called with the lines and subtotal. Return a promise to show a spinner on the button until it settles. |
| undoSeconds | number | 5 | Seconds a removed line can be restored for. |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount inside this element instead of |
