{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-tier-comparison-matrix",
  "title": "Pricing Tier Comparison Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-tier-comparison-matrix/PricingTierComparisonMatrix.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Minus, ShieldCheck } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype BillingCycle = 'monthly' | 'annual'\n\ninterface Plan {\n  id: string\n  name: string\n  description: string\n  monthlyPrice: number\n  annualPrice: number\n  highlight: boolean\n  badge?: string\n  ctaText: string\n  ctaVariant: 'default' | 'outline' | 'secondary'\n}\n\nconst plans: Plan[] = [\n  {\n    id: 'community',\n    name: 'Community OSS',\n    description: 'For indie hackers and developers building open source products.',\n    monthlyPrice: 0,\n    annualPrice: 0,\n    highlight: false,\n    ctaText: 'Start Building Free',\n    ctaVariant: 'outline',\n  },\n  {\n    id: 'pro',\n    name: 'Pro Team',\n    description: 'For growing startup engineering teams that require high velocity.',\n    monthlyPrice: 29,\n    annualPrice: 24,\n    highlight: true,\n    badge: 'Most Popular',\n    ctaText: 'Claim Pro License',\n    ctaVariant: 'default',\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise Scale',\n    description: 'Dedicated registry syncing, SSO, SOC2 compliance audits, and SLA.',\n    monthlyPrice: 119,\n    annualPrice: 99,\n    highlight: false,\n    ctaText: 'Talk to Sales',\n    ctaVariant: 'outline',\n  },\n]\n\ninterface FeatureComparisonRow {\n  category: string\n  features: {\n    name: string\n    tooltip: string\n    community: boolean | string\n    pro: boolean | string\n    enterprise: boolean | string\n  }[]\n}\n\nconst comparisonData: FeatureComparisonRow[] = [\n  {\n    category: 'Registry & Core Primitives',\n    features: [\n      {\n        name: 'Full AST Component Source Access',\n        tooltip: 'Raw SFC and TSX source files copied directly into your repository.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Dual-Framework Parity (Vue + React)',\n        tooltip: 'Identical DOM semantics and CVA tokens across both ecosystems.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Curated Marketing & SaaS Blocks',\n        tooltip: 'Access to 450+ production-grade unbundled layout blocks.',\n        community: '100+ Blocks',\n        pro: 'All 450+ Blocks',\n        enterprise: 'All Blocks + Custom',\n      },\n      {\n        name: 'Tailwind CSS v4 OKLCH Token System',\n        tooltip: 'Hardware-calibrated color spaces and spring curves.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: 'Enterprise & Security Compliance',\n    features: [\n      {\n        name: 'Private Registry Mirroring',\n        tooltip: 'Host your organization’s customized internal registry behind a firewall.',\n        community: false,\n        pro: '1 Private Repo',\n        enterprise: 'Unlimited Private Hubs',\n      },\n      {\n        name: 'SOC2 & ISO 27001 Audit Packs',\n        tooltip: 'Pre-certified security documentation and architecture proofs.',\n        community: false,\n        pro: false,\n        enterprise: true,\n      },\n      {\n        name: 'Guaranteed 99.99% Registry CDN SLA',\n        tooltip: 'Global multi-region edge distribution uptime guarantee.',\n        community: false,\n        pro: '99.9% SLA',\n        enterprise: '99.99% High Availability',\n      },\n      {\n        name: 'Dedicated Design Engineering Support',\n        tooltip: 'Direct Slack / Discord channel with core design system maintainers.',\n        community: false,\n        pro: 'Priority Email',\n        enterprise: 'Dedicated Slack Channel',\n      },\n    ],\n  },\n]\n\nexport interface PricingTierComparisonMatrixProps {\n  className?: string\n}\n\nexport function PricingTierComparisonMatrix({ className }: PricingTierComparisonMatrixProps) {\n  const [billing, setBilling] = React.useState<BillingCycle>('annual')\n\n  return (\n    <section\n      data-slot=\"pricing-tier-comparison-matrix\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-16\">\n        {/* Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <ShieldCheck className=\"text-primary size-3.5\" />\n            Predictable Pricing\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Zero seat taxes. Own your source code forever.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            Choose the tier that fits your engineering team's delivery scale and compliance needs.\n          </p>\n\n          {/* Billing Toggle */}\n          <div className=\"flex items-center justify-center gap-3 pt-4\">\n            <span\n              className={cn(\n                'font-mono text-xs',\n                billing === 'monthly' ? 'text-foreground font-bold' : 'text-muted-foreground',\n              )}\n            >\n              Monthly\n            </span>\n            <div className=\"border-border bg-card relative flex items-center rounded-full border p-1\">\n              <button\n                type=\"button\"\n                className={cn(\n                  'relative z-10 rounded-full px-3 py-1 font-mono text-xs transition-colors',\n                  billing === 'monthly'\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground',\n                )}\n                onClick={() => setBilling('monthly')}\n              >\n                Monthly\n              </button>\n              <button\n                type=\"button\"\n                className={cn(\n                  'relative z-10 flex items-center gap-1.5 rounded-full px-3 py-1 font-mono text-xs transition-colors',\n                  billing === 'annual'\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground',\n                )}\n                onClick={() => setBilling('annual')}\n              >\n                <span>Annual</span>\n                <span className=\"bg-success rounded-full px-1.5 py-0.5 text-xs font-bold text-white\">Save 20%</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Pricing Plan Cards Grid (3 Columns) */}\n        <div className=\"grid grid-cols-1 items-stretch gap-6 md:grid-cols-3\">\n          {plans.map((plan) => (\n            <Card\n              key={plan.id}\n              className={cn(\n                'border-border bg-card relative flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl transition-colors sm:p-8',\n                plan.highlight\n                  ? 'border-primary/80 ring-primary/20 scale-[1.02] shadow-sm ring-2'\n                  : 'hover:border-border/80',\n              )}\n            >\n              {/* Top Badge */}\n              {plan.badge && (\n                <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                  <Badge className=\"px-3 py-0.5 font-mono text-xs tracking-wider uppercase shadow-md\">\n                    {plan.badge}\n                  </Badge>\n                </div>\n              )}\n\n              <div className=\"space-y-4\">\n                <div>\n                  <h3 className=\"text-foreground font-mono text-xl font-bold\">{plan.name}</h3>\n                  <p className=\"text-muted-foreground mt-1 min-h-[36px] text-xs\">{plan.description}</p>\n                </div>\n\n                {/* Price display */}\n                <div className=\"flex items-baseline gap-1.5 font-mono\">\n                  <span className=\"text-foreground text-4xl font-bold\">\n                    ${billing === 'annual' ? plan.annualPrice : plan.monthlyPrice}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">/ month</span>\n                </div>\n                <p className=\"text-muted-foreground font-mono text-xs\">\n                  {billing === 'annual' && plan.annualPrice > 0\n                    ? `Billed annually ($${plan.annualPrice * 12}/yr)`\n                    : 'Billed monthly'}\n                </p>\n              </div>\n\n              <Button variant={plan.ctaVariant} className=\"h-10 w-full gap-1.5 font-mono text-xs shadow-xs\">\n                <span>{plan.ctaText}</span>\n                <ArrowRight className=\"size-3.5\" />\n              </Button>\n            </Card>\n          ))}\n        </div>\n\n        {/* Deep Feature Comparison Matrix Table */}\n        <div className=\"space-y-6\">\n          <div className=\"text-center\">\n            <h3 className=\"text-foreground font-mono text-xl font-bold\">Detailed Feature Comparison</h3>\n            <p className=\"text-muted-foreground mt-1 text-xs\">Full granular matrix of capabilities and entitlements.</p>\n          </div>\n\n          <Card className=\"border-border bg-card overflow-hidden rounded-2xl text-left shadow-sm\">\n            <div className=\"overflow-x-auto\">\n              <table className=\"w-full border-collapse text-left text-xs\">\n                <thead>\n                  <tr className=\"border-border bg-muted/40 text-muted-foreground border-b font-mono\">\n                    <th className=\"w-1/2 p-4 font-semibold\">Capability</th>\n                    <th className=\"p-4 text-center font-semibold\">Community</th>\n                    <th className=\"text-primary p-4 text-center font-bold font-semibold\">Pro Team</th>\n                    <th className=\"p-4 text-center font-semibold\">Enterprise</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {comparisonData.map((section, sIdx) => (\n                    <React.Fragment key={sIdx}>\n                      <tr className=\"bg-muted/20 border-border/80 border-b\">\n                        <td\n                          colSpan={4}\n                          className=\"text-muted-foreground p-3 px-4 font-mono text-xs font-bold tracking-wider uppercase\"\n                        >\n                          {section.category}\n                        </td>\n                      </tr>\n                      {section.features.map((row, rIdx) => (\n                        <tr key={rIdx} className=\"border-border/60 hover:bg-muted/10 border-b transition-colors\">\n                          <td className=\"p-4\">\n                            <div className=\"text-foreground font-medium\">{row.name}</div>\n                            <div className=\"text-muted-foreground mt-0.5 text-xs\">{row.tooltip}</div>\n                          </td>\n                          <td className=\"p-4 text-center font-mono\">\n                            {typeof row.community === 'boolean' ? (\n                              row.community ? (\n                                <Check className=\"text-success mx-auto size-4\" />\n                              ) : (\n                                <Minus className=\"text-muted-foreground/40 mx-auto size-4\" />\n                              )\n                            ) : (\n                              <span className=\"text-muted-foreground\">{row.community}</span>\n                            )}\n                          </td>\n                          <td className=\"p-4 text-center font-mono font-semibold\">\n                            {typeof row.pro === 'boolean' ? (\n                              row.pro ? (\n                                <Check className=\"text-success mx-auto size-4\" />\n                              ) : (\n                                <Minus className=\"text-muted-foreground/40 mx-auto size-4\" />\n                              )\n                            ) : (\n                              <span className=\"text-primary\">{row.pro}</span>\n                            )}\n                          </td>\n                          <td className=\"p-4 text-center font-mono\">\n                            {typeof row.enterprise === 'boolean' ? (\n                              row.enterprise ? (\n                                <Check className=\"text-success mx-auto size-4\" />\n                              ) : (\n                                <Minus className=\"text-muted-foreground/40 mx-auto size-4\" />\n                              )\n                            ) : (\n                              <span className=\"text-foreground font-semibold\">{row.enterprise}</span>\n                            )}\n                          </td>\n                        </tr>\n                      ))}\n                    </React.Fragment>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default PricingTierComparisonMatrix\n",
      "type": "registry:block",
      "target": "~/components/blocks/PricingTierComparisonMatrix.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}