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

With Quantity Controls

Provide onQuantityChange to enable inline increment and decrement buttons.

MacBook Pro — CartItem with Quantity Controls

With Variant Details

Display product variant information such as size or color.

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>
  );
}

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>
  );
}

ProductCard - Product display card
PriceTag - Price display with discounts
QuantitySelector - Standalone quantity control

Import

Basic Usage

Premium Headphones

With Quantity Controls

MacBook Pro

With Variant Details

Cotton T-Shirt

Props

Usage Examples

Shopping Cart Page

On this page