{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart-drawer", "type": "registry:block", "title": "Cart drawer", "description": "Right-side cart with a free-shipping meter, animated line items, a two-item upsell, a collapsible discount code and totals. Focus trap, Escape, scroll lock.", "author": "StoreKit ", "categories": [ "cart", "any" ], "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "https://storekit-eight.vercel.app/r/cn.json", "https://storekit-eight.vercel.app/r/button.json", "https://storekit-eight.vercel.app/r/input.json", "https://storekit-eight.vercel.app/r/price.json", "https://storekit-eight.vercel.app/r/product-image.json", "https://storekit-eight.vercel.app/r/stepper.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "cart/cart-drawer.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { Check, ChevronDown, Lock, Plus, Trash2, Truck, X } from \"lucide-react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { Button } from \"@/components/storekit/ui/button\"\nimport { Input } from \"@/components/storekit/ui/input\"\nimport { Price } from \"@/components/storekit/ui/price\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\nimport { Stepper } from \"@/components/storekit/ui/stepper\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* The flagship cart. A right-side drawer with a free-shipping meter, animated\n line items, a two-up upsell row, a collapsible discount code and totals.\n Pass `contained` to pin it inside a relative parent instead of the viewport\n (no body scroll lock, no focus grab on first mount). */\n\nexport type CartDrawerLine = {\n id: string\n title: string\n variant?: string\n price: number\n compareAt?: number\n image: string\n quantity: number\n}\n\nexport type CartDrawerUpsell = { id: string; title: string; variant?: string; price: number; image: string }\n\nconst SAMPLE_LINES: CartDrawerLine[] = [\n { id: \"daily-greens\", title: \"Daily Greens\", variant: \"30 servings\", price: 4900, image: \"/brands/morrow/greens.webp\", quantity: 1 },\n { id: \"electrolytes\", title: \"Electrolytes\", variant: \"30 sticks\", price: 3200, image: \"/brands/morrow/electrolytes.webp\", quantity: 1 },\n { id: \"magnesium-night\", title: \"Magnesium Night\", variant: \"60 gummies\", price: 2900, image: \"/brands/morrow/magnesium.webp\", quantity: 1 },\n]\n\nconst SAMPLE_UPSELLS: CartDrawerUpsell[] = [\n { id: \"bac-water\", title: \"Electrolytes Travel Pack\", variant: \"10 sticks\", price: 1200, image: \"/brands/morrow/electrolytes.webp\" },\n { id: \"protein\", title: \"Protein\", variant: \"30 servings\", price: 5400, image: \"/brands/morrow/protein.webp\" },\n]\n\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])'\n\nexport function CartDrawer({\n open,\n onOpenChange,\n items = SAMPLE_LINES,\n upsells = SAMPLE_UPSELLS,\n freeShippingThreshold = 15000,\n discountCodes = { WELCOME10: 10 },\n contained = false,\n onCheckout,\n onLinesChange,\n className,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n /** Initial lines. The drawer owns quantity and removal state after mount. */\n items?: CartDrawerLine[]\n upsells?: CartDrawerUpsell[]\n /** In cents. */\n freeShippingThreshold?: number\n /** Code to percent off. */\n discountCodes?: Record\n contained?: boolean\n onCheckout?: (lines: CartDrawerLine[]) => void\n /** Fires after every quantity change, removal or upsell add, e.g. to keep a header count in sync. */\n onLinesChange?: (lines: CartDrawerLine[]) => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n const sk = useSkBlock(\"cart\", \"cart-drawer\")\n const [lines, setLines] = React.useState(items)\n const [codeOpen, setCodeOpen] = React.useState(false)\n const [code, setCode] = React.useState(\"\")\n const [codeError, setCodeError] = React.useState()\n const [applied, setApplied] = React.useState<{ code: string; pct: number } | null>(null)\n const [checkingOut, setCheckingOut] = React.useState(false)\n const panelRef = React.useRef(null)\n const closeRef = React.useRef(null)\n const firstMount = React.useRef(true)\n const titleId = React.useId()\n const codeRegion = React.useId()\n\n const count = lines.reduce((n, l) => n + l.quantity, 0)\n const subtotal = lines.reduce((n, l) => n + l.price * l.quantity, 0)\n const discount = applied ? Math.round((subtotal * applied.pct) / 100) : 0\n const afterDiscount = subtotal - discount\n const remaining = Math.max(0, freeShippingThreshold - afterDiscount)\n const unlocked = remaining === 0 && lines.length > 0\n const pct = Math.min(100, (afterDiscount / freeShippingThreshold) * 100)\n\n // Scroll lock while open (viewport mode only).\n React.useEffect(() => {\n if (!open || contained) return\n const prev = document.body.style.overflow\n document.body.style.overflow = \"hidden\"\n return () => {\n document.body.style.overflow = prev\n }\n }, [open, contained])\n\n // Report line changes (not the initial lines) to the parent.\n const linesChange = React.useRef(onLinesChange)\n linesChange.current = onLinesChange\n const initialLines = React.useRef(lines)\n React.useEffect(() => {\n if (lines !== initialLines.current) linesChange.current?.(lines)\n }, [lines])\n\n // Move focus in on open and hand it back to the opener on close. Skip the\n // very first mount in contained mode so a gallery card that renders open\n // does not steal focus or scroll the page.\n React.useEffect(() => {\n const skip = firstMount.current && contained\n firstMount.current = false\n if (!open || skip) return\n const opener = document.activeElement as HTMLElement | null\n const t = window.setTimeout(() => closeRef.current?.focus({ preventScroll: true }), 30)\n return () => {\n window.clearTimeout(t)\n if (opener && opener !== document.body && opener.isConnected) opener.focus({ preventScroll: true })\n }\n }, [open, contained])\n\n // Escape closes.\n React.useEffect(() => {\n if (!open) return\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") onOpenChange(false)\n }\n document.addEventListener(\"keydown\", onKey)\n return () => document.removeEventListener(\"keydown\", onKey)\n }, [open, onOpenChange])\n\n // Focus trap: keep Tab inside the panel.\n const onPanelKeyDown = (e: React.KeyboardEvent) => {\n if (e.key !== \"Tab\" || !panelRef.current) return\n const nodes = Array.from(panelRef.current.querySelectorAll(FOCUSABLE))\n if (!nodes.length) return\n const first = nodes[0]\n const last = nodes[nodes.length - 1]\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault()\n last.focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault()\n first.focus()\n }\n }\n\n const setQty = (id: string, quantity: number) => setLines((ls) => ls.map((l) => (l.id === id ? { ...l, quantity } : l)))\n const remove = (id: string) => setLines((ls) => ls.filter((l) => l.id !== id))\n const addUpsell = (u: CartDrawerUpsell) => {\n sk.emit(\"interact\", \"upsell_add\", u.price)\n setLines((ls) => (ls.some((l) => l.id === u.id) ? ls.map((l) => (l.id === u.id ? { ...l, quantity: l.quantity + 1 } : l)) : [...ls, { ...u, quantity: 1 }]))\n }\n\n const applyCode = () => {\n const key = code.trim().toUpperCase()\n if (!key) return setCodeError(\"Enter a code.\")\n const off = discountCodes[key]\n if (!off) return setCodeError(\"That code is not valid.\")\n setApplied({ code: key, pct: off })\n setCodeError(undefined)\n setCode(\"\")\n }\n\n const checkout = () => {\n sk.emit(\"convert\", \"checkout\", afterDiscount)\n setCheckingOut(true)\n window.setTimeout(() => {\n setCheckingOut(false)\n onCheckout?.(lines)\n }, 900)\n }\n\n const d = reduce ? 0 : 1\n const position = contained ? \"absolute\" : \"fixed\"\n\n return (\n \n {open ? (\n
} {...sk.attrs} className={cn(position, \"inset-0 z-50\", className)}>\n onOpenChange(false)}\n />\n \n {/* Header */}\n
\n

\n Your cart ({count})\n

\n onOpenChange(false)}\n className=\"-mr-2 grid h-11 w-11 place-items-center rounded-sk-btn text-sk-ink transition-colors duration-200 hover:bg-sk-ink/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n >\n \n \n
\n\n {/* Free shipping meter */}\n
\n

\n {unlocked ? : }\n {unlocked ? (\n Free shipping unlocked\n ) : (\n \n You are {money(remaining)} away from free shipping\n \n )}\n

\n
\n \n
\n
\n\n {/* Body */}\n
\n {lines.length === 0 ? (\n
\n

Your cart is empty.

\n

The best sellers are a good place to start.

\n
\n ) : (\n
    \n \n {lines.map((l) => (\n \n
    \n \n
    \n
    \n
    \n

    {l.title}

    \n {l.variant ?

    {l.variant}

    : null}\n
    \n \n
    \n
    \n setQty(l.id, q)} size=\"sm\" />\n remove(l.id)}\n className=\"-mr-2 grid h-11 w-11 place-items-center rounded-sk-btn text-sk-muted transition-colors duration-200 hover:bg-sk-ink/[0.05] hover:text-sk-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent active:scale-[0.97]\"\n >\n \n \n
    \n
    \n
    \n \n ))}\n     \n
\n )}\n\n {/* Upsell row */}\n {upsells.length ? (\n
\n

Pairs well with

\n
\n {upsells.slice(0, 2).map((u) => {\n const inCart = lines.some((l) => l.id === u.id)\n return (\n
\n \n
\n

{u.title}

\n

\n {u.variant ? `${u.variant} / ` : null}\n {money(u.price)}\n

\n
\n addUpsell(u)}\n className={cn(\n \"grid h-11 w-11 shrink-0 place-items-center rounded-sk-btn border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent active:scale-[0.97]\",\n inCart ? \"border-sk-savings/40 text-sk-savings\" : \"border-sk-line text-sk-ink hover:bg-sk-ink/[0.05]\"\n )}\n >\n {inCart ? : }\n \n
\n )\n })}\n
\n
\n ) : null}\n
\n\n {/* Footer */}\n
\n setCodeOpen((o) => !o)}\n className=\"flex h-11 w-full items-center justify-between rounded-sk-btn text-[13px] font-medium text-sk-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent\"\n >\n {applied ? `Code ${applied.code} applied` : \"Add a discount code\"}\n \n \n \n {codeOpen ? (\n \n {\n e.preventDefault()\n applyCode()\n }}\n >\n
\n setCode(e.target.value)} error={codeError} />\n
\n \n \n \n ) : null}\n \n\n
\n
\n
Subtotal
\n
{money(subtotal)}
\n
\n {applied ? (\n
\n
Discount ({applied.pct}%)
\n
-{money(discount)}
\n
\n ) : null}\n
\n
Shipping
\n
{unlocked ? \"Free\" : \"Calculated at checkout\"}
\n
\n
\n
\n \n \n
\n
\n \n
\n ) : null}\n \n )\n}\n", "type": "registry:block", "target": "components/storekit/cart/cart-drawer.tsx" } ], "docs": "Controlled by open/onOpenChange. Pass contained to pin it inside a relative parent instead of the viewport.", "meta": { "section": "cart", "variant": "drawer", "niche": [ "any" ], "commerce": [ "cart", "quantity", "discount", "shipping-threshold", "upsell" ], "previewHeight": 780 } }