steep components
All components

CartLineItem

Cart drawer / cart page line — image, name, qty stepper, line total, remove.

components/cart-line-item.tsxPeer deps: lucide-react

Live preview

Usage

import { CartLineItem } from "@/components/cart-line-item";

{cart.items.map((item) => (
  <CartLineItem
    key={item.productId}
    productId={item.productId}
    name={item.name}
    slug={item.slug}
    priceCents={item.priceCents}
    imageUrl={item.imageUrl}
    quantity={item.quantity}
    onQuantityChange={(id, qty) => cartStore.updateQuantity(id, qty)}
    onRemove={(id) => cartStore.remove(id)}
    onSaveForLater={(id) => cartStore.saveForLater(id)}
  />
))}