{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-table",
  "type": "registry:block",
  "title": "Comparison table",
  "description": "Us vs typical vendor across six rows, the brand column tinted and marked, rows staggered in on view.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "marketing",
    "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/sk-analytics.json"
  ],
  "files": [
    {
      "path": "marketing/comparison-table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { 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 { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* \"Us vs typical vendor\" table. Booleans render as check or x, strings\n   render as values. The brand column carries a tinted column background and\n   the brand mark; the other column stays muted so the contrast reads at a\n   glance. Rows rise in, staggered, when scrolled into view. An optional CTA\n   closes the block. */\n\ntype Row = { feature: string; us: boolean | string; them: boolean | string }\n\nconst SAMPLE: Row[] = [\n  { feature: \"Third-party lab results for every batch\", us: true, them: false },\n  { feature: \"Price per serving\", us: \"$1.63\", them: \"$2.90\" },\n  { feature: \"Added sugar\", us: \"0g\", them: \"4g\" },\n  { feature: \"Artificial colors or fillers\", us: false, them: true },\n  { feature: \"Made in the USA\", us: true, them: true },\n  { feature: \"30-day guarantee, even if empty\", us: true, them: false },\n]\n\nconst EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]\n\nfunction Cell({ v, brand }: { v: boolean | string; brand?: boolean }) {\n  if (typeof v === \"string\") return <span className={cn(\"text-sm tabular-nums\", brand ? \"font-semibold text-sk-ink\" : \"text-sk-muted\")}>{v}</span>\n  if (!v)\n    return (\n      <span className=\"inline-grid h-7 w-7 place-items-center text-sk-muted/70\">\n        <X size={15} strokeWidth={2} aria-label=\"No\" />\n      </span>\n    )\n  return (\n    <span className={cn(\"inline-grid h-7 w-7 place-items-center rounded-sk-chip\", brand ? \"bg-sk-accent text-sk-accent-ink\" : \"bg-sk-ink/[0.06] text-sk-ink/70\")}>\n      <Check size={15} strokeWidth={2.5} aria-label=\"Yes\" />\n    </span>\n  )\n}\n\nexport function ComparisonTable({\n  brandName = \"Morrow\",\n  markSrc = \"/brands/morrow/mark.webp\",\n  othersLabel = \"Typical brand\",\n  eyebrow = \"Why us\",\n  title = \"The difference is in the scoop.\",\n  rows = SAMPLE,\n  ctaLabel = \"Shop Daily Greens\",\n  onCta,\n  className,\n}: {\n  brandName?: string\n  markSrc?: string\n  othersLabel?: string\n  eyebrow?: string\n  title?: string\n  rows?: Row[]\n  /** Pass an empty string to hide the closing button. */\n  ctaLabel?: string\n  onCta?: () => void\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"marketing\", \"comparison-table\")\n  const tint = \"bg-sk-accent/[0.06]\"\n  return (\n    <section ref={sk.ref as React.Ref<HTMLElement>} {...sk.attrs} className={cn(\"w-full px-4 py-16 sm:px-8 sm:py-24\", className)}>\n      <div className=\"mx-auto max-w-3xl\">\n        <p className=\"text-center font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{eyebrow}</p>\n        <h2 className=\"mt-3 text-center font-sk-display text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-4xl\">{title}</h2>\n        <table className=\"mt-10 w-full table-fixed border-separate border-spacing-0 text-left\">\n          <colgroup>\n            <col className=\"w-[46%]\" />\n            <col className=\"w-[27%]\" />\n            <col className=\"w-[27%]\" />\n          </colgroup>\n          <thead>\n            <tr>\n              <th scope=\"col\" className=\"pb-4 align-bottom font-sk-mono text-[11px] font-normal uppercase tracking-[0.14em] text-sk-muted\">Feature</th>\n              <th scope=\"col\" className={cn(\"rounded-t-sk-card px-2 pb-4 pt-5 text-center align-bottom\", tint)}>\n                <span className=\"flex flex-col items-center gap-2\">\n                  <img src={markSrc} alt=\"\" className=\"h-8 w-8 object-contain\" />\n                  <span className=\"text-sm font-semibold text-sk-ink\">{brandName}</span>\n                </span>\n              </th>\n              <th scope=\"col\" className=\"px-2 pb-4 text-center align-bottom text-sm font-medium text-sk-muted\">{othersLabel}</th>\n            </tr>\n          </thead>\n          <motion.tbody\n            initial=\"hidden\"\n            whileInView=\"show\"\n            viewport={{ once: true, amount: 0.3 }}\n            variants={{ hidden: {}, show: { transition: { staggerChildren: reduce ? 0 : 0.05 } } }}\n          >\n            {rows.map((r, i) => {\n              const last = i === rows.length - 1\n              return (\n                <motion.tr\n                  key={r.feature}\n                  variants={{ hidden: { opacity: 0, y: reduce ? 0 : 8 }, show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } } }}\n                >\n                  <th scope=\"row\" className=\"border-t border-sk-line py-4 pr-3 text-sm font-normal leading-[1.5] text-sk-ink\">{r.feature}</th>\n                  <td className={cn(\"border-t border-sk-line px-2 py-4 text-center\", tint, last && \"rounded-b-sk-card\")}>\n                    <Cell v={r.us} brand />\n                  </td>\n                  <td className=\"border-t border-sk-line px-2 py-4 text-center\">\n                    <Cell v={r.them} />\n                  </td>\n                </motion.tr>\n              )\n            })}\n          </motion.tbody>\n        </table>\n        {ctaLabel ? (\n          <div className=\"mt-10 flex justify-center\">\n            <Button\n              size=\"lg\"\n              onClick={() => {\n                sk.emit(\"convert\", \"comparison_cta\")\n                onCta?.()\n              }}\n            >\n              {ctaLabel}\n            </Button>\n          </div>\n        ) : null}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/marketing/comparison-table.tsx"
    }
  ],
  "meta": {
    "section": "marketing",
    "variant": "versus",
    "niche": [
      "any"
    ],
    "commerce": [
      "comparison",
      "trust"
    ],
    "previewHeight": 640
  }
}