Cart Line Item
Cart rows with quantity steppers and Remove that collapses the row behind an Undo bar for a few seconds.
cart-line.tsxcart-line.css
Checking access…
Overview
Each row shows a thumbnail tile, name, variant and a line total that animates when quantity changes. Removing a row collapses it into a slim “Removed · Undo” bar with a countdown, then it is gone.
The subtotal at the bottom always reflects what is still in the cart.
When to use
- Carts, order editors, bag drawers.
When not to use
- Read-only order summaries.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/cart-line.json$
npx shadcn@latest add https://sundaeui.dev/r/cart-line.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/cart-line.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/cart-line.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy cart-line.tsx and cart-line.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CartLine } from '@/components/sundae/cart-line'
<CartLine />Props
| Prop | Type | Default |
|---|---|---|
items*Lines; price in cents. | { id: string; name: string; variant: string; price: number; qty: number }[] | — |
onChangeCalled with the cart after a change. | (items) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Quantity uses labelled buttons; removal and undo are announced politely.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ctl; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Cart Line Item free?
- Cart Line Item is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Cart Line Item?
- Run npx shadcn@latest add https://sundaeui.dev/r/cart-line.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Cart Line Item support keyboard and screen readers?
- Quantity uses labelled buttons; removal and undo are announced politely. Reduced motion removes the movement and keeps every state change.
- Does Cart Line Item respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Free Shipping Progress
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined - Pro
Billing Toggle
Checkout · Refined - Pro
Tip Selector
Checkout · Refined