Skip to content
Nim UI

CartItem

The CartItem component displays a product within a shopping cart, showing the product image, title, price, quantity, and optional variant details. It supports inline quantity adjustment and removal.

Import

import { CartItem } from '@nim-ui/components';

Basic Usage

Basic CartItem

Premium Headphones

Premium Headphones

$199.99

Qty: 1
View Code 
<CartItem
  image="/products/headphones.jpg"
  title="Premium Headphones"
  price="$199.99"
  quantity={1}
/>

With Quantity Controls

Provide onQuantityChange to enable inline increment and decrement buttons.

CartItem with Quantity Controls

MacBook Pro

MacBook Pro

$1,999

Qty: 2
View Code 
<CartItem
  image="/products/laptop.jpg"
  title="MacBook Pro"
  price="$1,999"
  quantity={2}
  onQuantityChange={(qty) => updateQuantity(qty)}
  onRemove={() => removeItem()}
/>

With Variant Details

Display product variant information such as size or color.

CartItem with Variant

Cotton T-Shirt

Cotton T-Shirt

Size: L, Color: Blue

$29.99

Qty: 3
View Code 
<CartItem
  image="/products/shirt.jpg"
  title="Cotton T-Shirt"
  price="$29.99"
  quantity={3}
  variant="Size: L, Color: Blue"
  onRemove={() => removeItem()}
/>

Props

Name Type Default Description
image * string - URL of the product thumbnail image
title * string - Product name
price * string | number - Formatted price to display
quantity * number - Current quantity of the item
variant string - Product variant details, e.g. "Size: M, Color: Red"
imageAlt string - Alt text for the image. Defaults to the title if not provided
onRemove () => void - Callback when the remove button is clicked
onQuantityChange (quantity: number) => void - Callback when quantity is changed via increment/decrement buttons
className string - Additional CSS classes to apply

Usage Examples

Shopping Cart Page

function ShoppingCart() {
  const [items, setItems] = useState<CartItemData[]>(initialItems);


  const updateQuantity = (id: string, quantity: number) => {
    setItems((prev) =>
      prev.map((item) => (item.id === id ? { ...item, quantity } : item))
    );
  };


  const removeItem = (id: string) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  };


  return (
    <div className="divide-y">
      {items.map((item) => (
        <CartItem
          key={item.id}
          image={item.image}
          title={item.title}
          price={`$${(item.price * item.quantity).toFixed(2)}`}
          quantity={item.quantity}
          variant={item.variant}
          onQuantityChange={(qty) => updateQuantity(item.id, qty)}
          onRemove={() => removeItem(item.id)}
        />
      ))}
    </div>
  );
}

Mini Cart Dropdown

function MiniCart({ items }: { items: CartItemData[] }) {
  return (
    <div className="w-80 rounded-lg border shadow-lg">
      <div className="p-4 border-b font-semibold">
        Cart ({items.length} items)
      </div>
      <div className="max-h-64 overflow-y-auto">
        {items.map((item) => (
          <CartItem
            key={item.id}
            image={item.image}
            title={item.title}
            price={item.formattedPrice}
            quantity={item.quantity}
            onRemove={() => removeFromCart(item.id)}
          />
        ))}
      </div>
      <div className="p-4 border-t">
        <Button fullWidth>Checkout</Button>
      </div>
    </div>
  );
}