A shadcn cart drawer for Next.js

The free shadcn cart: Sheet plus your line items

components/cart-sheet.tsx (after npx shadcn@latest add sheet button)

"use client"

import { Minus, Plus, ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export type CartLine = { id: string; name: string; price: number; qty: number }

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })

export function CartSheet({
  lines,
  onQty,
  onCheckout,
}: {
  lines: CartLine[]
  onQty: (id: string, delta: number) => void
  onCheckout: () => void
}) {
  const count = lines.reduce((n, l) => n + l.qty, 0)
  const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0)

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" aria-label={`Cart, ${count} items`}>
          <ShoppingCart />
          {count}
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Your cart</SheetTitle>
          <SheetDescription>
            {count === 0 ? "Your cart is empty." : `${count} items`}
          </SheetDescription>
        </SheetHeader>
        <ul className="grid gap-3 overflow-y-auto px-4">
          {lines.map((l) => (
            <li key={l.id} className="grid grid-cols-[1fr_auto] items-center gap-2">
              <div>
                <p className="text-sm font-medium">{l.name}</p>
                <p className="text-muted-foreground text-sm">{usd.format(l.price)}</p>
              </div>
              <div className="flex items-center gap-1">
                <Button size="icon" variant="outline" aria-label={`Remove one ${l.name}`} onClick={() => onQty(l.id, -1)}>
                  <Minus />
                </Button>
                <span className="w-6 text-center text-sm tabular-nums">{l.qty}</span>
                <Button size="icon" variant="outline" aria-label={`Add one ${l.name}`} onClick={() => onQty(l.id, 1)}>
                  <Plus />
                </Button>
              </div>
            </li>
          ))}
        </ul>
        <SheetFooter>
          <div className="flex justify-between text-sm font-medium">
            <span>Subtotal</span>
            <span>{usd.format(subtotal)}</span>
          </div>
          <Button disabled={count === 0} onClick={onCheckout}>
            Checkout
          </Button>
          <SheetClose asChild>
            <Button variant="outline">Keep shopping</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}