{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-comparison",
  "title": "Pricing comparison table",
  "description": "Grouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "badge",
    "button",
    "tabs",
    "https://velora.colorlib.com/r/blur-fade.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/pricing-comparison.tsx",
      "content": "import { CheckIcon, MinusIcon } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { cn } from \"@/lib/utils\";\n\nconst PLANS = [\n  {\n    id: \"starter\",\n    name: \"Starter\",\n    price: \"$0\",\n    period: \"free forever\",\n    cta: \"Get started\",\n    featured: false,\n  },\n  {\n    id: \"team\",\n    name: \"Team\",\n    price: \"$24\",\n    period: \"per seat / month\",\n    cta: \"Start free trial\",\n    featured: true,\n  },\n  {\n    id: \"business\",\n    name: \"Business\",\n    price: \"$48\",\n    period: \"per seat / month\",\n    cta: \"Start free trial\",\n    featured: false,\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise\",\n    price: \"Custom\",\n    period: \"billed annually\",\n    cta: \"Contact sales\",\n    featured: false,\n  },\n] as const;\n\ntype PlanId = (typeof PLANS)[number][\"id\"];\n/** `true` = included, `false` = not included, a string = included with that limit */\ntype Value = boolean | string;\n\nconst GROUPS: {\n  name: string;\n  features: { name: string; values: Record<PlanId, Value> }[];\n}[] = [\n  {\n    name: \"Workspace\",\n    features: [\n      {\n        name: \"Members\",\n        values: {\n          starter: \"Up to 3\",\n          team: \"Unlimited\",\n          business: \"Unlimited\",\n          enterprise: \"Unlimited\",\n        },\n      },\n      {\n        name: \"Projects\",\n        values: {\n          starter: \"5\",\n          team: \"Unlimited\",\n          business: \"Unlimited\",\n          enterprise: \"Unlimited\",\n        },\n      },\n      {\n        name: \"File storage\",\n        values: {\n          starter: \"2 GB\",\n          team: \"100 GB\",\n          business: \"1 TB\",\n          enterprise: \"Custom\",\n        },\n      },\n      {\n        name: \"Guest access\",\n        values: {\n          starter: false,\n          team: true,\n          business: true,\n          enterprise: true,\n        },\n      },\n      {\n        name: \"Version history\",\n        values: {\n          starter: \"7 days\",\n          team: \"90 days\",\n          business: \"1 year\",\n          enterprise: \"Unlimited\",\n        },\n      },\n    ],\n  },\n  {\n    name: \"Automation\",\n    features: [\n      {\n        name: \"Workflow runs\",\n        values: {\n          starter: \"250 / month\",\n          team: \"10,000 / month\",\n          business: \"Unlimited\",\n          enterprise: \"Unlimited\",\n        },\n      },\n      {\n        name: \"Integrations\",\n        values: { starter: true, team: true, business: true, enterprise: true },\n      },\n      {\n        name: \"Public API and webhooks\",\n        values: {\n          starter: false,\n          team: true,\n          business: true,\n          enterprise: true,\n        },\n      },\n      {\n        name: \"Custom AI agents\",\n        values: {\n          starter: false,\n          team: false,\n          business: true,\n          enterprise: true,\n        },\n      },\n    ],\n  },\n  {\n    name: \"Security\",\n    features: [\n      {\n        name: \"Two-factor authentication\",\n        values: { starter: true, team: true, business: true, enterprise: true },\n      },\n      {\n        name: \"SAML SSO\",\n        values: {\n          starter: false,\n          team: false,\n          business: true,\n          enterprise: true,\n        },\n      },\n      {\n        name: \"SCIM provisioning\",\n        values: {\n          starter: false,\n          team: false,\n          business: false,\n          enterprise: true,\n        },\n      },\n      {\n        name: \"Audit log\",\n        values: {\n          starter: false,\n          team: false,\n          business: \"90 days\",\n          enterprise: \"Unlimited\",\n        },\n      },\n      {\n        name: \"Data residency\",\n        values: {\n          starter: false,\n          team: false,\n          business: false,\n          enterprise: true,\n        },\n      },\n    ],\n  },\n  {\n    name: \"Support\",\n    features: [\n      {\n        name: \"Help centre and community\",\n        values: { starter: true, team: true, business: true, enterprise: true },\n      },\n      {\n        name: \"Email support\",\n        values: {\n          starter: false,\n          team: \"48 h\",\n          business: \"4 h\",\n          enterprise: \"1 h\",\n        },\n      },\n      {\n        name: \"Uptime SLA\",\n        values: {\n          starter: false,\n          team: false,\n          business: \"99.9%\",\n          enterprise: \"99.99%\",\n        },\n      },\n      {\n        name: \"Dedicated success manager\",\n        values: {\n          starter: false,\n          team: false,\n          business: false,\n          enterprise: true,\n        },\n      },\n    ],\n  },\n];\n\nfunction Cell({ value, featured }: { value: Value; featured?: boolean }) {\n  if (value === true) {\n    return (\n      <>\n        <CheckIcon\n          aria-hidden\n          className={cn(\n            \"size-5\",\n            featured ? \"text-primary\" : \"text-foreground/80\",\n          )}\n        />\n        <span className=\"sr-only\">Included</span>\n      </>\n    );\n  }\n  if (value === false) {\n    return (\n      <>\n        <MinusIcon aria-hidden className=\"size-5 text-muted-foreground/50\" />\n        <span className=\"sr-only\">Not included</span>\n      </>\n    );\n  }\n  return <span className=\"text-sm\">{value}</span>;\n}\n\n/**\n * Full plan comparison. Wide screens get a semantic table with a sticky plan\n * header and grouped rows; below `lg` each plan becomes a tab with its own\n * grouped list, so nothing needs sideways scrolling.\n */\nexport function PricingComparison() {\n  return (\n    <section className=\"px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <BlurFade className=\"mx-auto max-w-2xl text-center\">\n          <p className=\"text-sm font-medium text-primary\">Compare plans</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl\">\n            Every feature, side by side\n          </h2>\n          <p className=\"mt-5 text-lg text-pretty text-muted-foreground\">\n            Start free and upgrade when you need more room. Every paid plan\n            comes with a free two-week trial.\n          </p>\n        </BlurFade>\n\n        {/* Below lg: one plan at a time */}\n        <div className=\"mx-auto mt-12 max-w-xl lg:hidden\">\n          <Tabs defaultValue=\"team\">\n            <TabsList\n              aria-label=\"Choose a plan\"\n              className=\"h-auto! w-full flex-wrap gap-1 rounded-xl p-1\"\n            >\n              {PLANS.map((plan) => (\n                <TabsTrigger\n                  key={plan.id}\n                  value={plan.id}\n                  className=\"h-9 min-w-[calc(50%-0.25rem)] rounded-lg sm:min-w-0\"\n                >\n                  {plan.name}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {PLANS.map((plan) => (\n              <TabsContent key={plan.id} value={plan.id} className=\"mt-4\">\n                <div\n                  className={cn(\n                    \"rounded-3xl border bg-card p-6 sm:p-8\",\n                    plan.featured &&\n                      \"border-primary/30 shadow-lg shadow-primary/10\",\n                  )}\n                >\n                  <div className=\"flex items-center justify-between gap-3\">\n                    <h3 className=\"text-lg font-semibold\">{plan.name}</h3>\n                    {plan.featured && <Badge>Most popular</Badge>}\n                  </div>\n                  <p className=\"mt-4 flex flex-wrap items-baseline gap-x-2\">\n                    <span className=\"text-4xl font-semibold tracking-tight\">\n                      {plan.price}\n                    </span>\n                    <span className=\"text-sm text-muted-foreground\">\n                      {plan.period}\n                    </span>\n                  </p>\n                  <Button\n                    asChild\n                    size=\"lg\"\n                    variant={plan.featured ? \"default\" : \"outline\"}\n                    className=\"mt-6 h-11 w-full rounded-full\"\n                  >\n                    <a href=\"#\">\n                      {plan.cta}\n                      <span className=\"sr-only\"> — {plan.name} plan</span>\n                    </a>\n                  </Button>\n\n                  {GROUPS.map((group) => (\n                    <div key={group.name} className=\"mt-8\">\n                      <h4 className=\"text-xs font-semibold tracking-wide text-muted-foreground uppercase\">\n                        {group.name}\n                      </h4>\n                      <ul className=\"mt-3 divide-y border-y\">\n                        {group.features.map((feature) => {\n                          const value = feature.values[plan.id];\n                          return (\n                            <li\n                              key={feature.name}\n                              className={cn(\n                                \"flex items-center justify-between gap-4 py-3 text-sm\",\n                                value === false && \"text-muted-foreground\",\n                              )}\n                            >\n                              <span>{feature.name}</span>\n                              <span className=\"flex shrink-0 items-center text-right\">\n                                <Cell value={value} featured={plan.featured} />\n                              </span>\n                            </li>\n                          );\n                        })}\n                      </ul>\n                    </div>\n                  ))}\n                </div>\n              </TabsContent>\n            ))}\n          </Tabs>\n        </div>\n\n        {/* lg and up: the full table */}\n        <div className=\"mt-16 hidden lg:block\">\n          <table className=\"w-full table-fixed border-separate border-spacing-0 text-left\">\n            <caption className=\"sr-only\">\n              Feature comparison of the Starter, Team, Business and Enterprise\n              plans\n            </caption>\n            <colgroup>\n              <col className=\"w-[28%]\" />\n              {PLANS.map((plan) => (\n                <col key={plan.id} />\n              ))}\n            </colgroup>\n            <thead>\n              <tr>\n                <td className=\"sticky top-0 z-10 border-b bg-background/85 pb-6 backdrop-blur-md\" />\n                {PLANS.map((plan) => (\n                  <th\n                    key={plan.id}\n                    scope=\"col\"\n                    className={cn(\n                      \"sticky top-0 z-10 border-b bg-background/85 px-4 pt-6 pb-6 align-bottom font-normal backdrop-blur-md\",\n                      plan.featured &&\n                        \"before:pointer-events-none before:absolute before:inset-0 before:rounded-t-2xl before:bg-primary/[0.04]\",\n                    )}\n                  >\n                    <div\n                      className={cn(\n                        \"flex items-center gap-2\",\n                        plan.featured && \"text-primary\",\n                      )}\n                    >\n                      <span className=\"text-base font-semibold\">\n                        {plan.name}\n                      </span>\n                      {plan.featured && <Badge>Popular</Badge>}\n                    </div>\n                    <p className=\"mt-2\">\n                      <span className=\"block text-3xl font-semibold tracking-tight text-foreground\">\n                        {plan.price}\n                      </span>\n                      <span className=\"mt-1 block text-xs text-muted-foreground\">\n                        {plan.period}\n                      </span>\n                    </p>\n                    <Button\n                      asChild\n                      variant={plan.featured ? \"default\" : \"outline\"}\n                      className=\"mt-4 h-9 w-full rounded-full\"\n                    >\n                      <a href=\"#\">\n                        {plan.cta}\n                        <span className=\"sr-only\"> — {plan.name} plan</span>\n                      </a>\n                    </Button>\n                  </th>\n                ))}\n              </tr>\n            </thead>\n\n            {GROUPS.map((group) => (\n              <tbody key={group.name}>\n                <tr>\n                  <th\n                    scope=\"rowgroup\"\n                    className=\"pt-10 pb-3 text-sm font-semibold\"\n                  >\n                    {group.name}\n                  </th>\n                  {PLANS.map((plan) => (\n                    <td\n                      key={plan.id}\n                      className={cn(plan.featured && \"bg-primary/[0.04]\")}\n                    />\n                  ))}\n                </tr>\n                {group.features.map((feature) => (\n                  <tr key={feature.name} className=\"group/row\">\n                    <th\n                      scope=\"row\"\n                      className=\"border-t py-3.5 pr-4 text-sm font-normal text-muted-foreground group-hover/row:text-foreground\"\n                    >\n                      {feature.name}\n                    </th>\n                    {PLANS.map((plan) => (\n                      <td\n                        key={plan.id}\n                        className={cn(\n                          \"border-t px-4 py-3.5 group-hover/row:bg-muted/40\",\n                          plan.featured &&\n                            \"bg-primary/[0.04] group-hover/row:bg-primary/[0.08]\",\n                        )}\n                      >\n                        <span className=\"flex items-center\">\n                          <Cell\n                            value={feature.values[plan.id]}\n                            featured={plan.featured}\n                          />\n                        </span>\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            ))}\n          </table>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/pricing-comparison.tsx"
    }
  ],
  "categories": [
    "pricing-sections"
  ],
  "type": "registry:block"
}