{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-3",
  "title": "Three-Plan Feature Matrix",
  "description": "Feature comparison table across Starter, Growth, and Enterprise plans, with grouped sections, a sticky header row, and a highlighted recommended column.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "table"
  ],
  "files": [
    {
      "path": "registry/blocks/comparison/3/comparison-block.tsx",
      "content": "import * as React 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 { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype CellValue = boolean | string\n\ntype Feature = {\n  label: string\n  values: [CellValue, CellValue, CellValue]\n}\n\ntype FeatureGroup = {\n  section: string\n  features: Feature[]\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    price: \"$0\",\n    cadence: \"Free Forever\",\n    highlighted: false,\n  },\n  {\n    name: \"Growth\",\n    price: \"$24\",\n    cadence: \"Per User / Month\",\n    highlighted: true,\n  },\n  {\n    name: \"Enterprise\",\n    price: \"Custom\",\n    cadence: \"Talk To Sales\",\n    highlighted: false,\n  },\n] as const\n\nconst groups: FeatureGroup[] = [\n  {\n    section: \"Core\",\n    features: [\n      { label: \"Projects\", values: [\"3\", \"Unlimited\", \"Unlimited\"] },\n      { label: \"Storage\", values: [\"2 GB\", \"100 GB\", \"1 TB+\"] },\n      { label: \"API access\", values: [false, true, true] },\n      { label: \"Custom workflows\", values: [false, true, true] },\n    ],\n  },\n  {\n    section: \"Collaboration\",\n    features: [\n      { label: \"Team members\", values: [\"Up to 3\", \"Up to 50\", \"Unlimited\"] },\n      { label: \"Real-time editing\", values: [true, true, true] },\n      { label: \"Guest access\", values: [false, true, true] },\n      {\n        label: \"Roles & permissions\",\n        values: [\"Basic\", \"Advanced\", \"Granular\"],\n      },\n    ],\n  },\n  {\n    section: \"Support\",\n    features: [\n      {\n        label: \"Response time\",\n        values: [\"Community\", \"Under 24h\", \"Under 1h\"],\n      },\n      { label: \"Priority queue\", values: [false, true, true] },\n      { label: \"Dedicated manager\", values: [false, false, true] },\n      { label: \"99.99% uptime SLA\", values: [false, false, true] },\n    ],\n  },\n]\n\nfunction Cell({\n  value,\n  highlighted,\n}: {\n  value: CellValue\n  highlighted: boolean\n}) {\n  if (typeof value === \"boolean\") {\n    return value ? (\n      <span\n        className={cn(\n          \"mx-auto flex size-5 items-center justify-center rounded-md\",\n          highlighted ? \"bg-primary\" : \"bg-foreground/80\"\n        )}\n      >\n        <IconPlaceholder\n          lucide=\"Check\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"Check\"\n          remixicon=\"RiCheckLine\"\n          className={cn(\n            \"size-3.5\",\n            highlighted ? \"text-primary-foreground\" : \"text-background\"\n          )}\n          aria-hidden\n        />\n        <span className=\"sr-only\">Included</span>\n      </span>\n    ) : (\n      <span className=\"mx-auto flex size-5 items-center justify-center rounded-md bg-muted\">\n        <IconPlaceholder\n          lucide=\"X\"\n          tabler=\"IconX\"\n          hugeicons=\"Cancel01Icon\"\n          phosphor=\"X\"\n          remixicon=\"RiCloseLine\"\n          className=\"size-3.5 text-muted-foreground\"\n          aria-hidden\n        />\n        <span className=\"sr-only\">Not included</span>\n      </span>\n    )\n  }\n\n  return (\n    <span\n      className={cn(\n        \"text-sm font-medium\",\n        highlighted ? \"text-foreground\" : \"text-muted-foreground\"\n      )}\n    >\n      {value}\n    </span>\n  )\n}\n\nexport default function ComparisonBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mb-10 max-w-2xl\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            <IconPlaceholder\n              lucide=\"Sparkles\"\n              tabler=\"IconSparkles\"\n              hugeicons=\"SparklesIcon\"\n              phosphor=\"Sparkle\"\n              remixicon=\"RiSparkling2Line\"\n              data-icon=\"inline-start\"\n            />\n            Compare plans\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Find the right plan for your team\n          </h2>\n          <p className=\"mt-3 text-sm text-muted-foreground\">\n            Every Acme plan scales with you. Compare features side by side and\n            upgrade the moment you need more.\n          </p>\n        </div>\n\n        <div className=\"relative\">\n          <Badge\n            variant=\"default\"\n            className=\"absolute bottom-full left-[68%] z-20 mb-2 -translate-x-1/2\"\n          >\n            Most Popular\n          </Badge>\n          <div className=\"overflow-x-auto rounded-lg border border-border\">\n            <Table className=\"table-fixed text-sm\">\n              <TableHeader>\n                <TableRow className=\"hover:bg-transparent\">\n                  <TableHead className=\"sticky top-0 z-20 w-[36%] border-b border-border bg-background align-bottom\">\n                    <span className=\"inline-block pb-3 text-sm font-semibold tracking-wide text-muted-foreground uppercase\">\n                      Features\n                    </span>\n                  </TableHead>\n                  {plans.map((plan) => (\n                    <TableHead\n                      key={plan.name}\n                      className={cn(\n                        \"sticky top-0 z-20 border-b border-border text-center align-bottom\",\n                        plan.highlighted ? \"bg-primary/5\" : \"bg-background\"\n                      )}\n                    >\n                      <div className=\"flex flex-col items-center gap-1 py-3\">\n                        <span className=\"text-sm font-semibold text-foreground\">\n                          {plan.name}\n                        </span>\n                        <span className=\"text-lg font-bold text-foreground\">\n                          {plan.price}\n                        </span>\n                        <span className=\"text-xs font-normal text-muted-foreground\">\n                          {plan.cadence}\n                        </span>\n                      </div>\n                    </TableHead>\n                  ))}\n                </TableRow>\n              </TableHeader>\n\n              <TableBody>\n                {groups.map((group) => (\n                  <React.Fragment key={group.section}>\n                    <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                      <TableCell\n                        colSpan={4}\n                        className=\"py-2 text-xs font-semibold tracking-wide text-foreground uppercase\"\n                      >\n                        {group.section}\n                      </TableCell>\n                    </TableRow>\n                    {group.features.map((feature) => (\n                      <TableRow key={`${group.section}-${feature.label}`}>\n                        <TableCell className=\"py-3 font-medium text-foreground\">\n                          {feature.label}\n                        </TableCell>\n                        {feature.values.map((value, i) => (\n                          <TableCell\n                            key={`${feature.label}-${plans[i].name}`}\n                            className={cn(\n                              \"py-3 text-center\",\n                              plans[i].highlighted && \"bg-primary/5\"\n                            )}\n                          >\n                            <Cell\n                              value={value}\n                              highlighted={plans[i].highlighted}\n                            />\n                          </TableCell>\n                        ))}\n                      </TableRow>\n                    ))}\n                  </React.Fragment>\n                ))}\n\n                <TableRow className=\"hover:bg-transparent\">\n                  <TableCell className=\"py-4\" />\n                  {plans.map((plan) => (\n                    <TableCell\n                      key={`cta-${plan.name}`}\n                      className={cn(\n                        \"py-4 text-center\",\n                        plan.highlighted && \"bg-primary/5\"\n                      )}\n                    >\n                      <Button\n                        nativeButton={false}\n                        size=\"sm\"\n                        variant={plan.highlighted ? \"default\" : \"secondary\"}\n                        className=\"w-full\"\n                        render={<a href=\"#\" />}\n                      >\n                        {plan.price === \"Custom\" ? \"Contact us\" : \"Choose\"}\n                        <IconPlaceholder\n                          lucide=\"ArrowRight\"\n                          tabler=\"IconArrowRight\"\n                          hugeicons=\"ArrowRightIcon\"\n                          phosphor=\"ArrowRight\"\n                          remixicon=\"RiArrowRightLine\"\n                          data-icon=\"inline-end\"\n                        />\n                      </Button>\n                    </TableCell>\n                  ))}\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/comparison-3.tsx"
    }
  ],
  "meta": {
    "height": "1103px",
    "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"
}