Compact Cart

A condensed cart panel listing items, quantities, and a running total in tight space. Fits a header dropdown or a narrow column without crowding the layout.

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import {
  ShoppingCart,
  Trash2,
  Plus,
  Minus,
  CreditCard,
  Package,
} from 'lucide-react';
import { useState } from 'react';

interface CartItem {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  quantity: number;
  image: string;
  color: string;
  size: string;
  stock: number;
}

export default function CompactCart() {
  const [items, setItems] = useState<CartItem[]>([
    {
      id: '1',
      name: 'Classic Chronograph Watch',
      price: 299.99,
      originalPrice: 399.99,
      quantity: 1,
      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
      color: 'Black',
      size: 'Standard',
      stock: 5,
    },
    {
      id: '2',
      name: 'Sport Diver Watch',
      price: 199.99,
      quantity: 2,
      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
      color: 'Blue',
      size: 'Standard',
      stock: 3,
    },
  ]);

  const subtotal = items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );
  const shipping = 5.99;
  const total = subtotal + shipping;

  const updateQuantity = (id: string, change: number) => {
    setItems((prev) =>
      prev.map((item) => {
        if (item.id === id) {
          const newQuantity = Math.max(
            1,
            Math.min(item.stock, item.quantity + change)
          );
          return { ...item, quantity: newQuantity };
        }
        return item;
      })
    );
  };

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

  return (
    <>
      {/* Height and default open set for example purpose only */}
      <div className="h-[850px] p-6">
        <Sheet defaultOpen>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon" className="relative">
              <ShoppingCart className="h-5 w-5" />
              {items.length > 0 && (
                <span className="bg-primary text-primary-foreground absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full text-xs">
                  {items.length}
                </span>
              )}
            </Button>
          </SheetTrigger>

          <SheetContent className="w-full px-4 sm:max-w-lg md:px-6">
            <SheetHeader>
              <SheetTitle>Shopping Cart</SheetTitle>
              <SheetDescription>
                {items.length} {items.length === 1 ? 'item' : 'items'} in your
                cart
              </SheetDescription>
            </SheetHeader>

            <div className="mt-6 space-y-6">
              {/* Cart Items */}
              <div className="space-y-4">
                {items.map((item) => (
                  <Card key={item.id} className="overflow-hidden p-0">
                    <CardContent className="p-0">
                      <div className="flex">
                        {/* Product Image */}
                        <div className="relative h-auto w-24 flex-shrink-0">
                          <img
                            src={item.image}
                            alt={item.name}
                            className="object-cover"
                            sizes="96px"
                          />
                        </div>

                        {/* Product Details */}
                        <div className="flex-1 p-4">
                          <div className="flex justify-between">
                            <div>
                              <h3 className="text-sm font-medium">
                                {item.name}
                              </h3>
                              <p className="text-muted-foreground text-xs">
                                {item.color} • {item.size}
                              </p>
                            </div>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              onClick={() => removeItem(item.id)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>

                          <div className="mt-2 flex items-center justify-between">
                            <div className="flex items-center gap-1">
                              <Button
                                variant="outline"
                                size="icon"
                                className="h-7 w-7"
                                onClick={() => updateQuantity(item.id, -1)}
                              >
                                <Minus className="h-3 w-3" />
                              </Button>
                              <span className="w-6 text-center text-sm">
                                {item.quantity}
                              </span>
                              <Button
                                variant="outline"
                                size="icon"
                                className="h-7 w-7"
                                onClick={() => updateQuantity(item.id, 1)}
                              >
                                <Plus className="h-3 w-3" />
                              </Button>
                            </div>

                            <div className="text-right">
                              <div className="text-sm font-medium">
                                ${(item.price * item.quantity).toFixed(2)}
                              </div>
                              {item.originalPrice && (
                                <div className="text-muted-foreground text-xs line-through">
                                  $
                                  {(item.originalPrice * item.quantity).toFixed(
                                    2
                                  )}
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {/* Order Summary */}
              <Card className="gap-0 p-0">
                <CardHeader className="p-4">
                  <CardTitle className="text-lg">Order Summary</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4 p-4 pt-0">
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>Subtotal</span>
                      <span>${subtotal.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>Shipping</span>
                      <span>${shipping.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between font-medium">
                      <span>Total</span>
                      <span>${total.toFixed(2)}</span>
                    </div>
                  </div>

                  <div className="text-muted-foreground flex items-center gap-2 text-sm">
                    <Package className="h-4 w-4" />
                    <span>Free shipping on orders over $200</span>
                  </div>

                  <Button className="w-full">
                    <CreditCard className="mr-2 h-4 w-4" />
                    Checkout
                  </Button>
                </CardContent>
              </Card>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </>
  );
}

About this block

Compact Cart opens as a slide-in sheet panel triggered by a cart icon button that shows a live item count badge. Inside the panel a header names the sheet and states how many items are present. Below it each cart item renders as a card with a square product thumbnail on the left and, on the right, the product name, a color and size note, a trash button, a plus/minus quantity stepper capped to available stock, the running line total, and a struck-through original price when a discount exists. An Order Summary card below the item list shows subtotal, shipping, and total, a free shipping threshold note, and a full-width checkout button.

Each piece is independently editable. You can swap product names, images, variant labels, prices, and stock limits without touching the panel structure. The shipping cost and free-shipping threshold are plain constants, so adjusting them takes a one-line change. Items can be added or removed from the initial list freely, and the item count badge and all totals update automatically.

When to use

Reach for this block when you need a cart that lives inside a header or a narrow sidebar column rather than taking over the full page. For an AI assistant product that sells usage plans, add-on credits, or tool packs, this panel lets a customer review their selections and adjust quantities without leaving the pricing or feature page they were reading. It fits better than a full cart page in contexts where the primary goal is a quick review before committing, and better than a floating overlay when you want the panel anchored to one side of the viewport.

A natural flow around it on an Ecommerce page:

Before

A Product Overview block so shoppers land on a clear product detail before adding to cart
A Product List so customers can browse and add multiple items in one pass

After

Trust Guarantee blocks to reinforce confidence just below the cart entry point
A Shipping Returns section so buyers see policy details right after reviewing their cart

What you can customize

The panel is built from three separable parts, each of which you can edit in isolation:

Item cards. Swap the product name, thumbnail, variant labels, price, original price, and stock ceiling per item without changing the stepper or remove logic.
Order Summary card. Adjust the flat shipping fee or the free shipping threshold copy to match your actual fulfillment rules.
Trigger button. Replace the cart icon with any button label or icon that fits your header, since the sheet opens from whatever element you pass as the trigger.

Tip: cap your demo item list at three or four entries so the panel stays scannable without requiring the user to scroll before they reach the checkout button.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

A Product Overview block so shoppers land on a clear product detail before adding to cart
A Product List so customers can browse and add multiple items in one pass

After

Trust Guarantee blocks to reinforce confidence just below the cart entry point
A Shipping Returns section so buyers see policy details right after reviewing their cart

What you can customize

The panel is built from three separable parts, each of which you can edit in isolation:

Item cards. Swap the product name, thumbnail, variant labels, price, original price, and stock ceiling per item without changing the stepper or remove logic.
Order Summary card. Adjust the flat shipping fee or the free shipping threshold copy to match your actual fulfillment rules.
Trigger button. Replace the cart icon with any button label or icon that fits your header, since the sheet opens from whatever element you pass as the trigger.

Tip: cap your demo item list at three or four entries so the panel stays scannable without requiring the user to scroll before they reach the checkout button.

Compact Cart

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize