Components
Shopping cart
The inside of a cart drawer: lines slide in and collapse away, quantity numbers roll, a liquid bar fills toward free shipping and the totals count to their new value.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ShoppingCart } from '@vizzele/react';
<ShoppingCart
items={items} // { id, name, price, quantity, image?, meta? }[]
onQuantityChange={(id, q) => setQuantity(id, q)}
onRemove={(id) => remove(id)}
currency="USD"
freeShippingAt={150}
shipping={9}
onCheckout={() => router.push('/checkout')}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CartItem[] | — | { id, name, price, quantity, image?, meta? } — price per unit. |
onQuantityChange | (id, quantity) => void | — | Steppers. |
onRemove | (id) => void | — | Called after the line has collapsed away. |
onCheckout | () => void | Promise | — | Return a promise to show it is busy. |
currency / locale | string | 'USD' | Formatting through Intl.NumberFormat. |
freeShippingAt | number | — | Show the bar toward free shipping. |
shipping | number | 0 | Cost below the threshold. |
title / checkoutLabel / empty | ReactNode | — | Your words. |
Accessibility
- A list of items; each stepper is a named group ("Quantity of Linen shirt") with Decrease and Increase buttons.
- At quantity 1 the minus becomes "Remove …", so nobody deletes a line by surprise.
- The item count and quantities are announced politely as they change.
- Totals are a description list, so they read as label and value.