{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "email-capture", "type": "registry:component", "title": "Email capture popup", "description": "Split modal with a product render, 10% off offer, loading and success states, and every dismiss path.", "author": "StoreKit ", "categories": [ "compliance", "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": "compliance/email-capture.tsx", "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { Check, X } from \"lucide-react\"\nimport { cn } 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\ntype Sk = ReturnType\n\n/** Mounts with the dialog so the view event fires when it actually opens. */\nfunction Tracked({ children }: { children: (sk: Sk) => React.ReactNode }) {\n const sk = useSkBlock(\"compliance\", \"email-capture\")\n return <>{children(sk)}\n}\n\n/* Email capture modal with a split layout: product render on the left, form\n on the right. Controlled via `open` and `onOpenChange`. Escape, the close\n button, the backdrop, and \"No thanks\" all dismiss. Scroll lock and a focus\n trap while open; focus returns to whatever opened it. Set `contained` to\n position inside the nearest relative parent instead of the viewport (it then\n skips the page scroll lock). `initialFocus={false}` keeps focus where it is\n on open, for previews that start open. */\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\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])'\n\nexport function EmailCapture({\n open,\n onOpenChange,\n image = \"/brands/morrow/greens.webp\",\n imageAlt = \"\",\n eyebrow = \"First order\",\n headline = \"10% off your first order\",\n body = \"New flavors, restocks and member-only bundles. One email a week at most.\",\n code = \"WELCOME10\",\n onSubmit = () => new Promise((r) => setTimeout(r, 900)),\n contained = false,\n initialFocus = true,\n className,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n image?: string\n imageAlt?: string\n eyebrow?: string\n headline?: string\n body?: string\n code?: string\n onSubmit?: (email: string) => void | Promise\n contained?: boolean\n initialFocus?: boolean\n className?: string\n}) {\n const reduce = useReducedMotion()\n const [email, setEmail] = useState(\"\")\n const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\")\n const [error, setError] = useState(null)\n const ref = useRef(null)\n const titleId = useId()\n const inputId = useId()\n\n useEffect(() => {\n if (!open) return\n const opener = document.activeElement as HTMLElement | null\n const prev = document.body.style.overflow\n if (!contained) document.body.style.overflow = \"hidden\"\n const raf = initialFocus ? requestAnimationFrame(() => ref.current?.querySelector(\"input\")?.focus({ preventScroll: true })) : 0\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault()\n onOpenChange(false)\n return\n }\n if (e.key !== \"Tab\" || !ref.current) return\n const items = Array.from(ref.current.querySelectorAll(FOCUSABLE))\n if (!items.length) return\n const first = items[0]\n const last = items[items.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 document.addEventListener(\"keydown\", onKey)\n return () => {\n cancelAnimationFrame(raf)\n if (!contained) document.body.style.overflow = prev\n document.removeEventListener(\"keydown\", onKey)\n if (initialFocus) opener?.focus({ preventScroll: true })\n }\n }, [open, onOpenChange, contained, initialFocus])\n\n const submit = async (e: React.FormEvent, sk: Sk) => {\n e.preventDefault()\n if (!/^\\S+@\\S+\\.\\S+$/.test(email)) {\n setError(\"Enter a valid email address.\")\n return\n }\n setError(null)\n setState(\"loading\")\n try {\n await onSubmit(email)\n setState(\"done\")\n sk.emit(\"convert\", \"email_submit\")\n } catch {\n setState(\"idle\")\n setError(\"Something went wrong. Try again.\")\n }\n }\n\n const ease = [0.16, 1, 0.3, 1] as const\n\n return (\n \n {open ? (\n \n {(sk) => (\n }\n {...sk.attrs}\n className={cn(contained ? \"absolute\" : \"fixed\", \"inset-0 z-50 grid place-items-center p-4\", className)}\n >\n onOpenChange(false)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.2 }}\n className=\"absolute inset-0 bg-[rgb(0_0_0/0.5)]\"\n />\n \n \n
\n onOpenChange(false)}\n className={cn(\"absolute right-1 top-1 grid h-11 w-11 place-items-center rounded-sk-btn text-sk-muted transition-colors duration-200 hover:text-sk-ink\", ring)}\n >\n \n \n \n {state === \"done\" ? (\n \n \n \n \n

Your code is ready

\n

Use it at checkout. We also sent it to {email}.

\n

{code}

\n \n \n ) : (\n \n

{eyebrow}

\n

{headline}

\n

{body}

\n
submit(e, sk)} noValidate className=\"mt-6 grid gap-2\">\n \n setEmail(e.target.value)}\n placeholder=\"you@lab.edu\"\n aria-invalid={!!error || undefined}\n aria-describedby={error ? `${inputId}-err` : undefined}\n className={cn(\n \"h-11 w-full rounded-sk-btn border bg-sk-card px-3.5 text-sm text-sk-ink outline-none transition-[border-color,box-shadow] duration-200 placeholder:text-sk-muted/70 focus:border-sk-accent focus:ring-[3px] focus:ring-sk-accent/15\",\n error ? \"border-sk-sale\" : \"border-sk-line\"\n )}\n />\n {error ?

{error}

: null}\n \n \n onOpenChange(false)}\n className={cn(\"mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-sk-btn text-[13px] text-sk-muted transition-colors duration-200 hover:text-sk-ink\", ring)}\n >\n No thanks\n \n
\n )}\n \n
\n \n \n )}\n \n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/storekit/compliance/email-capture.tsx" } ], "docs": "Controlled: you decide when to open it (timer, exit intent, scroll depth).", "meta": { "section": "compliance", "variant": "modal", "niche": [ "any" ], "commerce": [ "newsletter", "discount" ], "previewHeight": 500 } }