Cart
Cart Provider
A CartProvider context and useCart hook for client-side cart state: add lines, merge duplicate variants, update quantities, clear, and compute the subtotal. Sync to your backend through onLinesChange. Lumo components stay presentational; opt into this only when you want managed state.
state
context
hook
Preview
$0.00
0 items in cart
Installation
Run the shadcn CLI. Dependencies and the shared lib block come with it.
npx shadcn add cart-providerUsage
Import
import { CartProvider, useCart } from "@/components/lumo/cart-provider"Example
<CartProvider currency="USD" onLinesChange={save}>
<App />
</CartProvider>
// anywhere inside the tree:
const { lines, subtotal, totalQuantity, addLine, removeLine, updateQuantity, clear } = useCart()Props
| Prop | Type | Default | Required |
|---|---|---|---|
| children | ReactNode | - | Required |
| currency | string | "USD" | |
| initialLines | CartLine[] | [] | |
| onLinesChange | (lines) => void | - |
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.