Cart
Cart Drawer
An accessible slide-over cart built on Radix Dialog: line items, a summary, an empty state, and a slide-in animation.
dialog
cart
accessible
Preview
Installation
Run the shadcn CLI. Dependencies and the shared lib block come with it.
npx shadcn add cart-drawerUsage
Import
import { CartDrawer } from "@/components/lumo/cart-drawer"Example
<CartDrawer
open={open}
onOpenChange={setOpen}
lines={lines}
subtotal={subtotal}
onCheckout={() => router.push("/checkout")}
trigger={<button>Cart ({totalQuantity})</button>}
/>Props
| Prop | Type | Default | Required |
|---|---|---|---|
| lines | CartLine[] | - | Required |
| subtotal | Money | - | Required |
| open | boolean | - | |
| onOpenChange | (open) => void | - | |
| total | Money | - | |
| onQuantityChange | (lineId, quantity) => void | - | |
| onRemove | (lineId) => void | - | |
| onCheckout | () => void | - | |
| trigger | ReactNode | - | |
| title | string | "Your cart" | |
| emptyState | ReactNode | - |
All props accept standard HTML attributes unless otherwise specified.
Dependencies
Lumo blocks
npm packages
@radix-ui/react-dialoglucide-reacttw-animate-cssOwn every line
Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.