{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart-sheet", "type": "registry:component", "title": "Cart bottom sheet", "description": "Mobile bottom sheet after add to cart with a drag handle, the added item, cart subtotal, View cart and Checkout. 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/product-image.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "cart/cart-sheet.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion, type PanInfo } from \"motion/react\"\nimport { Check, X } from \"lucide-react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { Button } from \"@/components/storekit/ui/button\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Mobile bottom sheet shown after add to cart. Keeps the shopper on the\n page with the item, the cart subtotal and two clear next steps. Drag the\n handle down (or tap the scrim, or press Escape) to dismiss. Pass\n `contained` to pin it inside a relative parent instead of the viewport. */\n\nexport type CartSheetItem = { title: string; variant?: string; price: number; image: string; quantity?: number }\n\nconst SAMPLE_ITEM: CartSheetItem = { title: \"Daily Greens\", variant: \"30 servings\", price: 4900, image: \"/brands/morrow/greens.webp\", quantity: 1 }\n\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])'\n\nexport function CartSheet({\n open,\n onOpenChange,\n item = SAMPLE_ITEM,\n cartCount = 3,\n cartSubtotal = 19700,\n contained = false,\n onViewCart,\n onCheckout,\n className,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n item?: CartSheetItem\n /** Items in the cart after this add. */\n cartCount?: number\n /** Cart subtotal in cents after this add. */\n cartSubtotal?: number\n contained?: boolean\n onViewCart?: () => void\n onCheckout?: () => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n const sk = useSkBlock(\"cart\", \"cart-sheet\")\n const panelRef = React.useRef(null)\n const primaryRef = React.useRef(null)\n const firstMount = React.useRef(true)\n const titleId = React.useId()\n const d = reduce ? 0 : 1\n\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 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(() => primaryRef.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 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 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 onDragEnd = (_: unknown, info: PanInfo) => {\n if (info.offset.y > 96 || info.velocity.y > 500) onOpenChange(false)\n }\n\n const qty = item.quantity ?? 1\n\n return (\n \n {open ? (\n
} {...sk.attrs} className={cn(contained ? \"absolute\" : \"fixed\", \"inset-0 z-50\", className)}>\n onOpenChange(false)}\n />\n \n
\n \n
\n
\n

\n \n \n \n Added to cart\n

\n onOpenChange(false)}\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

{item.title}

\n

\n {item.variant ? `${item.variant} / ` : null}Qty {qty}\n

\n
\n

{money(item.price * qty)}

\n
\n\n
\n \n Cart subtotal ({cartCount} {cartCount === 1 ? \"item\" : \"items\"})\n \n {money(cartSubtotal)}\n
\n\n
\n {\n sk.emit(\"interact\", \"view_cart\")\n onViewCart?.()\n onOpenChange(false)\n }}\n >\n View cart\n \n {\n sk.emit(\"convert\", \"checkout\", cartSubtotal)\n onCheckout?.()\n }}\n >\n Checkout\n \n
\n onOpenChange(false)}\n className=\"mt-2 h-11 w-full rounded-sk-btn text-[13px] font-medium text-sk-muted transition-colors duration-200 hover:text-sk-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent active:scale-[0.97]\"\n >\n Keep shopping\n \n \n
\n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/storekit/cart/cart-sheet.tsx" } ], "docs": "Controlled by open/onOpenChange. Drag down past 96px to dismiss. Pass contained to pin it inside a relative parent.", "meta": { "section": "cart", "variant": "sheet", "niche": [ "any" ], "commerce": [ "cart", "atc" ], "previewHeight": 620 } }