Slide-Over Cart Drawer
A basket panel with the dialog mechanics usually missing: focus trap, focus return, Escape to close and a background scroll lock.
Editable Cart Lines
Quantity steppers and remove-with-undo, with every total derived rather than stored so the basket can never disagree with itself.
199 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026
- cart
- basket
- quantity
- undo
- line items
What's included
components/cart-line-items.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add cart-line-items
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Your bag
4 items · £267.00
Merino Crew Sweater
Stone · M
£89.00
Quantity of Merino Crew Sweater: 1Cotton Oxford Shirt
Sky · L
£130.00
Quantity of Cotton Oxford Shirt: 2Leather Card Holder
Black
£48.00
Quantity of Leather Card Holder: 1
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/cart-line-items.tsx
'use client'
/**
* <CartLineItems> — the editable contents of a basket.
*
* Money is integer minor units throughout and every total is derived, never
* stored. A cart that keeps its own `total` field drifts the first time a
* quantity changes on a path that forgot to recompute it, and the customer
* is the one who finds out at the payment step.
*
* Removing a line is undoable for a few seconds rather than confirmed with
* a dialog. A confirm on every removal is friction on the common case; an
* undo is friction only on the mistake, which is the right trade for an
* action this cheap to reverse.
*
* The line count and total are announced through `aria-live`, because after
* changing a quantity the only thing that visibly updates is a number
* somewhere else on the page.
*/
import * as React from 'react'
import { Minus, Plus, Trash2, Undo2 } from 'lucide-react'
export interface CartLine {
id: string
name: string
variant?: string
/** Unit price in minor units. */
price: number
quantity: number
maxQuantity?: number
swatch?: string
}
export interface CartLineItemsProps {
lines?: CartLine[]
currency?: string
locale?: string
onChange?: (lines: CartLine[]) => void
className?: string
}
const DEFAULT_LINES: CartLine[] = [
{ id: '1', name: 'Merino Crew Sweater', variant: 'Stone · M', price: 8900, quantity: 1, swatch: 'from-stone-300 to-stone-500' },
{ id: '2', name: 'Cotton Oxford Shirt', variant: 'Sky · L', price: 6500, quantity: 2, swatch: 'from-sky-200 to-sky-400' },
{ id: '3', name: 'Leather Card Holder', variant: 'Black', price: 4800, quantity: 1, swatch: 'from-emerald-300 to-emerald-600' },
]
function formatPrice(minor: number, currency = 'GBP', locale = 'en-GB'): string {
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(minor / 100)
}
export function CartLineItems({
lines: initialLines = DEFAULT_LINES,
currency = 'GBP',
locale = 'en-GB',
onChange,
className = '',
}: CartLineItemsProps) {
const [lines, setLines] = React.useState(initialLines)
const [removed, setRemoved] = React.useState<{ line: CartLine; index: number } | null>(null)
// Always derived. Never a stored field — see the file header.
const itemCount = lines.reduce((n, line) => n + line.quantity, 0)
const subtotal = lines.reduce((n, line) => n + line.price * line.quantity, 0)
function update(next: CartLine[]) {
setLines(next)
onChange?.(next)
}
function setQuantity(id: string, quantity: number) {
update(lines.map((l) => (l.id === id ? { ...l, quantity } : l)))
}
function remove(id: string) {
const index = lines.findIndex((l) => l.id === id)
if (index === -1) return
setRemoved({ line: lines[index], index })
update(lines.filter((l) => l.id !== id))
}
function undo() {
if (!removed) return
const next = [...lines]
// Restored to its original position, not appended — a line that
// reappears at the bottom looks like a different line.
next.splice(removed.index, 0, removed.line)
update(next)
setRemoved(null)
}
return (
<div className={className}>
<div className="flex items-baseline justify-between gap-4 border-b border-border/60 pb-4">
<h2 className="text-lg font-bold tracking-tight">Your bag</h2>
<p aria-live="polite" className="text-sm text-muted-foreground">
{itemCount} {itemCount === 1 ? 'item' : 'items'} ·{' '}
<span className="font-medium text-foreground">
{formatPrice(subtotal, currency, locale)}
</span>
</p>
</div>
{removed ? (
<div className="mt-4 flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-muted/40 px-4 py-2.5 text-sm">
<span className="truncate text-muted-foreground">
Removed <span className="font-medium text-foreground">{removed.line.name}</span>
</span>
<button
type="button"
onClick={undo}
className="inline-flex shrink-0 items-center gap-1.5 font-semibold hover:underline"
>
<Undo2 aria-hidden className="h-3.5 w-3.5 rtl:rotate-180" />
Undo
</button>
</div>
) : null}
{lines.length === 0 ? (
<p className="py-12 text-center text-sm text-muted-foreground">
Your bag is empty.
</p>
) : (
<ul className="divide-y divide-border/40">
{lines.map((line) => (
<li key={line.id} className="flex gap-4 py-5">
<div className="h-24 w-20 shrink-0 overflow-hidden rounded-xl border border-border/60 bg-muted">
<div
aria-hidden
className={`h-full w-full bg-gradient-to-br ${line.swatch ?? 'from-muted to-muted-foreground/20'}`}
/>
</div>
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
{line.name ? (
<h3 data-stress-ignore className="truncate text-sm font-medium">{line.name}</h3>
) : null}
{line.variant ? (
<p className="mt-0.5 text-xs text-muted-foreground">{line.variant}</p>
) : null}
</div>
<p className="shrink-0 text-sm font-semibold tabular-nums">
{formatPrice(line.price * line.quantity, currency, locale)}
</p>
</div>
<div className="mt-auto flex items-center justify-between gap-3 pt-3">
<div className="inline-flex items-center rounded-lg border border-border/60">
<button
type="button"
onClick={() => setQuantity(line.id, Math.max(1, line.quantity - 1))}
disabled={line.quantity <= 1}
aria-label={`Decrease quantity of ${line.name}`}
className="rounded-s-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
>
<Minus aria-hidden className="h-3.5 w-3.5" />
</button>
<span className="w-8 text-center text-sm tabular-nums">
<span className="sr-only">Quantity of {line.name}: </span>
{line.quantity}
</span>
<button
type="button"
onClick={() =>
setQuantity(line.id, Math.min(line.maxQuantity ?? 10, line.quantity + 1))
}
disabled={line.quantity >= (line.maxQuantity ?? 10)}
aria-label={`Increase quantity of ${line.name}`}
className="rounded-e-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
>
<Plus aria-hidden className="h-3.5 w-3.5" />
</button>
</div>
<button
type="button"
onClick={() => remove(line.id)}
aria-label={`Remove ${line.name} from bag`}
className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
>
<Trash2 aria-hidden className="h-4 w-4" />
</button>
</div>
</div>
</li>
))}
</ul>
)}
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/cart-line-items.tsx and import it where you need the section:
import { CartLineItems } from '@/components/cart-line-items'Customize
2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
lines | CartLine[] | — |
currency | string | 'GBP' |
locale | string | 'en-GB' |
onChange | (lines: CartLine[]) => void | — |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
cart-line-items.html
<!--
Editable Cart Lines — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="">
<div class="flex items-baseline justify-between gap-4 border-b border-border/60 pb-4">
<h2 class="text-lg font-bold tracking-tight">Your bag</h2>
<p aria-live="polite" class="text-sm text-muted-foreground">4 items · <span class="font-medium text-foreground">£267.00</span></p>
</div>
<ul class="divide-y divide-border/40">
<li class="flex gap-4 py-5">
<div class="h-24 w-20 shrink-0 overflow-hidden rounded-xl border border-border/60 bg-muted">
<div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-stone-300 to-stone-500"></div>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 data-stress-ignore="true" class="truncate text-sm font-medium">Merino Crew Sweater</h3>
<p class="mt-0.5 text-xs text-muted-foreground">Stone · M</p>
</div>
<p class="shrink-0 text-sm font-semibold tabular-nums">£89.00</p>
</div>
<div class="mt-auto flex items-center justify-between gap-3 pt-3">
<div class="inline-flex items-center rounded-lg border border-border/60">
<button type="button" disabled="" aria-label="Decrease quantity of Merino Crew Sweater" class="rounded-s-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
</svg>
</button>
<span class="w-8 text-center text-sm tabular-nums"><span class="sr-only">Quantity of Merino Crew Sweater: </span>1</span>
<button type="button" aria-label="Increase quantity of Merino Crew Sweater" class="rounded-e-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<button type="button" aria-label="Remove Merino Crew Sweater from bag" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 lucide-trash-2 h-4 w-4" aria-hidden="true">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</button>
</div>
</div>
</li>
<li class="flex gap-4 py-5">
<div class="h-24 w-20 shrink-0 overflow-hidden rounded-xl border border-border/60 bg-muted">
<div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-sky-200 to-sky-400"></div>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 data-stress-ignore="true" class="truncate text-sm font-medium">Cotton Oxford Shirt</h3>
<p class="mt-0.5 text-xs text-muted-foreground">Sky · L</p>
</div>
<p class="shrink-0 text-sm font-semibold tabular-nums">£130.00</p>
</div>
<div class="mt-auto flex items-center justify-between gap-3 pt-3">
<div class="inline-flex items-center rounded-lg border border-border/60">
<button type="button" aria-label="Decrease quantity of Cotton Oxford Shirt" class="rounded-s-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
</svg>
</button>
<span class="w-8 text-center text-sm tabular-nums"><span class="sr-only">Quantity of Cotton Oxford Shirt: </span>2</span>
<button type="button" aria-label="Increase quantity of Cotton Oxford Shirt" class="rounded-e-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<button type="button" aria-label="Remove Cotton Oxford Shirt from bag" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 lucide-trash-2 h-4 w-4" aria-hidden="true">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</button>
</div>
</div>
</li>
<li class="flex gap-4 py-5">
<div class="h-24 w-20 shrink-0 overflow-hidden rounded-xl border border-border/60 bg-muted">
<div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-emerald-300 to-emerald-600"></div>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 data-stress-ignore="true" class="truncate text-sm font-medium">Leather Card Holder</h3>
<p class="mt-0.5 text-xs text-muted-foreground">Black</p>
</div>
<p class="shrink-0 text-sm font-semibold tabular-nums">£48.00</p>
</div>
<div class="mt-auto flex items-center justify-between gap-3 pt-3">
<div class="inline-flex items-center rounded-lg border border-border/60">
<button type="button" disabled="" aria-label="Decrease quantity of Leather Card Holder" class="rounded-s-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
</svg>
</button>
<span class="w-8 text-center text-sm tabular-nums"><span class="sr-only">Quantity of Leather Card Holder: </span>1</span>
<button type="button" aria-label="Increase quantity of Leather Card Holder" class="rounded-e-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-3.5 w-3.5" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
</div>
<button type="button" aria-label="Remove Leather Card Holder from bag" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 lucide-trash-2 h-4 w-4" aria-hidden="true">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</button>
</div>
</div>
</li>
</ul>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
8 more blocks in Cart & Checkout
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Cart & CheckoutShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Cart & Checkout blocks
View categoryCheckout Address & Payment
The full autocomplete token set that lets a browser fill eight fields in one tap, plus address labels that follow the selected country.
Order Summary With Promo
Subtotal, discount, delivery and tax all derived from the lines, with the free-delivery nudge driven by the same threshold as the charge.
Express Payment Row
The wallet buttons above the form, and what they do to it: the address a wallet returns is shown and stays editable, and the row disappears entirely when no wallet is actually available.
Gift Options Form
The gifting step, placed in the cart where it is a choice rather than at checkout where it is friction.
Gift Card Purchase
The only checkout where the buyer is not the recipient - live preview, a send date with a stated timezone, and the confirm-the-address field that prevents the expensive typo.
Guest Checkout
Guest as the default and the whole form, with a real autocomplete token on every field and the account offer moved to the end, where it costs one checkbox.
Discount Offer Modal
The offer popup with four rules applied: triggered by intent, a decline button of equal weight, a dismissal that is remembered, and the terms on its face.