Cart Drawer

Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.

Your bag2
  • Air Max 90
    Air Max 90Qty 1
    $129
  • Field Jacket
    Field JacketQty 1
    $240
Subtotal$369

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Commerce12 } from "@/components/beste/piece/commerce12";

<Commerce12
  items={[
    {
      "image": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=128&auto=format&fit=crop",
      "name": "Air Max 90",
      "qty": 1,
      "price": "$129"
    },
    {
      "image": "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=128&auto=format&fit=crop",
      "name": "Field Jacket",
      "qty": 1,
      "price": "$240"
    }
  ]}
  subtotal="$369"
  tone="foreground"
/>