{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-4",
  "title": "Named Competitor Table",
  "description": "Comparison table setting your product against Notion, Trello, and Asana across grouped feature rows with check, cross, or value cells.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "table"
  ],
  "files": [
    {
      "path": "registry/blocks/comparison/4/comparison-block.tsx",
      "content": "import { Fragment } from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Cell = boolean | string\n\nconst vendors = [\"Acme\", \"Notion\", \"Trello\", \"Asana\"]\n\nconst groups: { label: string; rows: { feature: string; values: Cell[] }[] }[] =\n  [\n    {\n      label: \"Core\",\n      rows: [\n        { feature: \"Unlimited projects\", values: [true, true, false, true] },\n        {\n          feature: \"Real-time collaboration\",\n          values: [true, true, true, true],\n        },\n        {\n          feature: \"Offline mode\",\n          values: [true, false, true, false],\n        },\n      ],\n    },\n    {\n      label: \"Automation\",\n      rows: [\n        { feature: \"Built-in workflows\", values: [true, false, true, true] },\n        { feature: \"AI assistant\", values: [true, true, false, false] },\n        {\n          feature: \"Custom rules\",\n          values: [\"Unlimited\", \"25\", \"5\", \"50\"],\n        },\n      ],\n    },\n    {\n      label: \"Enterprise\",\n      rows: [\n        { feature: \"SAML SSO\", values: [true, true, false, true] },\n        { feature: \"Audit log\", values: [true, false, false, true] },\n        { feature: \"Data residency\", values: [true, false, false, false] },\n      ],\n    },\n  ]\n\nfunction ValueCell({ value }: { value: Cell }) {\n  if (typeof value === \"string\") {\n    return <span className=\"text-sm text-foreground tabular-nums\">{value}</span>\n  }\n  return value ? (\n    <IconPlaceholder\n      lucide=\"Check\"\n      tabler=\"IconCheck\"\n      hugeicons=\"Tick02Icon\"\n      phosphor=\"Check\"\n      remixicon=\"RiCheckLine\"\n      className=\"mx-auto size-4 text-foreground\"\n      aria-label=\"Yes\"\n    />\n  ) : (\n    <IconPlaceholder\n      lucide=\"X\"\n      tabler=\"IconX\"\n      hugeicons=\"Cancel01Icon\"\n      phosphor=\"X\"\n      remixicon=\"RiCloseLine\"\n      className=\"mx-auto size-4 text-muted-foreground/40\"\n      aria-label=\"No\"\n    />\n  )\n}\n\nexport default function ComparisonBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-20 text-foreground\">\n      <div className=\"mx-auto w-full max-w-4xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <span className=\"inline-block rounded-md border border-border px-3 py-1 text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            Comparison\n          </span>\n          <h2 className=\"mt-4 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            How Acme compares\n          </h2>\n          <p className=\"mt-4 text-base text-muted-foreground\">\n            A side-by-side look at the features teams switch to us for.\n          </p>\n        </div>\n\n        <div className=\"mt-12 overflow-x-auto rounded-lg border border-border\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"hover:bg-transparent\">\n                <TableHead className=\"w-[34%] align-bottom\">\n                  <span className=\"inline-block pb-3 text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n                    Feature\n                  </span>\n                </TableHead>\n                {vendors.map((vendor, index) => (\n                  <TableHead\n                    key={vendor}\n                    className={\n                      index === 0 ? \"bg-muted/40 text-center\" : \"text-center\"\n                    }\n                  >\n                    <div className=\"flex flex-col items-center gap-1.5 py-3\">\n                      {index === 0 && <Badge>You</Badge>}\n                      <span className=\"text-sm font-semibold text-foreground\">\n                        {vendor}\n                      </span>\n                    </div>\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {groups.map((group) => (\n                <Fragment key={group.label}>\n                  <TableRow className=\"bg-muted/30 hover:bg-muted/30\">\n                    <TableCell\n                      colSpan={vendors.length + 1}\n                      className=\"py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase\"\n                    >\n                      {group.label}\n                    </TableCell>\n                  </TableRow>\n                  {group.rows.map((row) => (\n                    <TableRow key={row.feature}>\n                      <TableCell className=\"text-sm text-foreground\">\n                        {row.feature}\n                      </TableCell>\n                      {row.values.map((value, index) => (\n                        <TableCell\n                          key={index}\n                          className={\n                            index === 0\n                              ? \"bg-muted/40 text-center\"\n                              : \"text-center\"\n                          }\n                        >\n                          <ValueCell value={value} />\n                        </TableCell>\n                      ))}\n                    </TableRow>\n                  ))}\n                </Fragment>\n              ))}\n              <TableRow className=\"hover:bg-transparent\">\n                <TableCell />\n                <TableCell className=\"bg-muted/40 py-4 text-center\">\n                  <Button\n                    render={<a href=\"#\" />}\n                    nativeButton={false}\n                    size=\"sm\"\n                    className=\"w-full max-w-[9rem]\"\n                  >\n                    Try Acme free\n                  </Button>\n                </TableCell>\n                <TableCell colSpan={vendors.length - 1} />\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/comparison-4.tsx"
    }
  ],
  "meta": {
    "height": "904px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "comparison"
  ],
  "type": "registry:block"
}