{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "age-gate", "type": "registry:component", "title": "Age gate", "description": "Full-screen 18+ interstitial that fades out on confirm and remembers the answer for 30 days.", "author": "StoreKit ", "categories": [ "compliance", "any" ], "dependencies": [ "motion" ], "registryDependencies": [ "https://storekit-eight.vercel.app/r/cn.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "compliance/age-gate.tsx", "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\ntype Sk = ReturnType\n\n/** Mounts with the gate so the view event fires when it actually appears. */\nfunction Tracked({ children }: { children: (sk: Sk) => React.ReactNode }) {\n const sk = useSkBlock(\"compliance\", \"age-gate\")\n return <>{children(sk)}\n}\n\n/* Full-screen age interstitial. A modal dialog with scroll lock and a focus\n trap; there is no Escape or backdrop exit by design. Confirming fades it out\n and stores an expiry in localStorage for `rememberDays`. Declining shows a\n blocked state with a way back. Set `contained` to cover only the nearest\n relative parent for previews; it then skips the page scroll lock, initial\n focus, and focus trap so the surrounding page stays usable. */\n\nconst ring =\n \"outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\"\n\nexport function AgeGate({\n brandName = \"Morrow\",\n markSrc,\n minAge = 18,\n message = \"Some products on this site are only for adults. Confirm your age to continue.\",\n rememberDays = 30,\n storageKey = \"sk-age-verified\",\n contained = false,\n onConfirm,\n className,\n}: {\n brandName?: string\n markSrc?: string\n minAge?: number\n /** One line under the heading explaining why you ask. */\n message?: string\n rememberDays?: number\n storageKey?: string\n contained?: boolean\n onConfirm?: () => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n const [open, setOpen] = useState(false)\n const [denied, setDenied] = useState(false)\n const ref = useRef(null)\n const titleId = useId()\n const descId = useId()\n\n useEffect(() => {\n let valid = false\n try {\n const until = Number(window.localStorage.getItem(storageKey))\n valid = Number.isFinite(until) && until > Date.now()\n } catch {}\n setOpen(!valid)\n }, [storageKey])\n\n useEffect(() => {\n if (!open || contained) return\n const prev = document.body.style.overflow\n document.body.style.overflow = \"hidden\"\n const raf = requestAnimationFrame(() => ref.current?.querySelector(\"button\")?.focus())\n const onKey = (e: KeyboardEvent) => {\n if (e.key !== \"Tab\" || !ref.current) return\n const items = Array.from(ref.current.querySelectorAll(\"button:not([disabled]),a[href]\"))\n if (!items.length) return\n const first = items[0]\n const last = items[items.length - 1]\n if (!ref.current.contains(document.activeElement)) {\n e.preventDefault()\n first.focus()\n } else 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 document.addEventListener(\"keydown\", onKey)\n return () => {\n cancelAnimationFrame(raf)\n document.body.style.overflow = prev\n document.removeEventListener(\"keydown\", onKey)\n }\n }, [open, denied, contained])\n\n const confirm = (sk: Sk) => {\n sk.emit(\"convert\", \"age_confirm\")\n try {\n window.localStorage.setItem(storageKey, String(Date.now() + rememberDays * 86400000))\n } catch {}\n setOpen(false)\n onConfirm?.()\n }\n\n return (\n \n {open ? (\n \n {(sk) => (\n {\n ref.current = el\n sk.ref.current = el\n }}\n {...sk.attrs}\n role=\"dialog\"\n aria-modal={contained ? undefined : true}\n aria-labelledby={titleId}\n aria-describedby={descId}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}\n className={cn(contained ? \"absolute\" : \"fixed\", \"inset-0 z-50 grid place-items-center bg-sk-paper px-4\", className)}\n >\n \n {markSrc ? \"\" : null}\n

{brandName}

\n \n {denied ? (\n \n

\n Access restricted\n

\n

\n This store is only available to adults {minAge} and older.\n

\n setDenied(false)}\n className={cn(\"mt-6 inline-flex min-h-11 items-center rounded-sk-btn px-3 text-sm text-sk-ink underline underline-offset-4\", ring)}\n >\n I answered by mistake\n \n \n ) : (\n \n

\n You must be {minAge} or older\n

\n

\n {message}\n

\n
\n confirm(sk)}\n className={cn(\"inline-flex h-11 items-center justify-center rounded-sk-btn bg-sk-accent px-5 text-sm font-medium text-sk-accent-ink transition-[transform,filter] duration-200 hover:brightness-[1.06] active:scale-[0.97]\", ring)}\n >\n I am {minAge} or older\n \n setDenied(true)}\n className={cn(\"inline-flex h-11 items-center justify-center rounded-sk-btn border border-sk-line px-5 text-sm font-medium text-sk-ink transition-[transform,background-color] duration-200 hover:bg-sk-ink/[0.04] active:scale-[0.97]\", ring)}\n >\n I am under {minAge}\n \n
\n

We remember your answer for {rememberDays} days.

\n \n )}\n \n \n \n )}\n \n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/storekit/compliance/age-gate.tsx" } ], "docs": "Mount once in your root layout. contained is for previews and skips the page scroll lock and focus trap.", "meta": { "section": "compliance", "variant": "age-gate", "niche": [ "any" ], "commerce": [ "age-verification" ], "previewHeight": 500 } }