LineItem
One line of a cart: name, variant, quantity stepper and price.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Card, LineItem, Stack, Text, Toaster} from '@kerf-js/veneer'export function Cart() { const cart = state(SHOP_CART) return ( <Card> <Stack gap="related"> {cart.value.map((line) => ( <LineItem key={line.id} line={line} cart={cart} /> ))} {cart.value.length === 0 && ( <Text subtle>Your cart is empty.</Text> )} </Stack> <Toaster /> </Card> )}const SHOP_CART = [ { id: 'key', name: 'Security key, USB-C', variant: 'Pack of 2', price: 58, quantity: 1, }, { id: 'hoodie', name: 'Kerf hoodie', variant: 'Graphite · M', price: 64, quantity: 1, }, { id: 'stickers', name: 'Sticker sheet', variant: 'Deploy on Friday', price: 6, quantity: 2, },]Installation
npm install @kerf-js/veneerUsage
tsx
import { LineItem } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
line | CartLine | — | The line to draw. |
cart | State<CartLine[]> | — | The whole cart, as a state. |
currency | string | — | A currency code. |
locale | string | — | The locale for the amounts. |
problem | unknown | — | A critical badge, such as Out of stock. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="line-item"] [data-part="thumb"]
thumbprice
RelatedCart drawerCheckout