{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-comparison",
  "type": "registry:ui",
  "title": "Pricing Comparison",
  "description": "A detailed pricing comparison table with features and plan differences.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-comparison.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { Check, Minus, MoveRight, PhoneCall } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface PlanFeature {\n  [key: string]: boolean | string;\n}\n\ninterface Plan {\n  name: string;\n  price: string;\n  description: string;\n  cta: string;\n  icon: React.ReactNode;\n  buttonVariant: \"default\" | \"outline\";\n  features: PlanFeature;\n}\n\ninterface FeatureCategory {\n  title: string;\n  items: { key: string; label: string }[];\n}\n\ninterface PricingComparisonProps {\n  plans?: Plan[];\n  categories?: FeatureCategory[];\n}\n\nconst defaultPlans: Plan[] = [\n  {\n    name: \"Startup\",\n    price: \"$40\",\n    description: \"Perfect for small teams launching fast.\",\n    cta: \"Try it\",\n    icon: <MoveRight className=\"w-4 h-4\" />,\n    buttonVariant: \"outline\",\n    features: {\n      sso: true,\n      twoFA: false,\n      encryption: true,\n      auditLogs: false,\n      ai: false,\n      backups: false,\n      versioning: false,\n      templates: true,\n      integrations: false,\n      members: \"5 members\",\n      multiplayer: false,\n      roles: false,\n      support: false,\n      orchestration: false,\n      deployment: false,\n      monitoring: false,\n      apiAccess: false,\n    },\n  },\n  {\n    name: \"Growth\",\n    price: \"$99\",\n    description: \"Designed for growing teams scaling features.\",\n    cta: \"Try it\",\n    icon: <MoveRight className=\"w-4 h-4\" />,\n    buttonVariant: \"default\",\n    features: {\n      sso: true,\n      twoFA: true,\n      encryption: true,\n      auditLogs: true,\n      ai: true,\n      backups: true,\n      versioning: true,\n      templates: true,\n      integrations: true,\n      members: \"25 members\",\n      multiplayer: true,\n      roles: true,\n      support: true,\n      orchestration: true,\n      deployment: true,\n      monitoring: true,\n      apiAccess: false,\n    },\n  },\n  {\n    name: \"Enterprise\",\n    price: \"$199\",\n    description: \"Everything you need at scale with full support.\",\n    cta: \"Contact us\",\n    icon: <PhoneCall className=\"w-4 h-4\" />,\n    buttonVariant: \"outline\",\n    features: {\n      sso: true,\n      twoFA: true,\n      encryption: true,\n      auditLogs: true,\n      ai: true,\n      backups: true,\n      versioning: true,\n      templates: true,\n      integrations: true,\n      members: \"100+ members\",\n      multiplayer: true,\n      roles: true,\n      support: true,\n      orchestration: true,\n      deployment: true,\n      monitoring: true,\n      apiAccess: true,\n    },\n  },\n];\n\nconst defaultCategories: FeatureCategory[] = [\n  {\n    title: \"Security\",\n    items: [\n      { key: \"sso\", label: \"SSO (Single Sign-On)\" },\n      { key: \"twoFA\", label: \"Two-Factor Authentication\" },\n      { key: \"encryption\", label: \"Data Encryption at Rest\" },\n      { key: \"auditLogs\", label: \"Security Audit Logs\" },\n    ],\n  },\n  {\n    title: \"Productivity\",\n    items: [\n      { key: \"ai\", label: \"AI Assistant\" },\n      { key: \"backups\", label: \"Automatic Backups\" },\n      { key: \"versioning\", label: \"Version Control\" },\n      { key: \"templates\", label: \"Built-in Templates\" },\n      { key: \"integrations\", label: \"3rd-Party Integrations\" },\n    ],\n  },\n  {\n    title: \"Team\",\n    items: [\n      { key: \"members\", label: \"Team Members Limit\" },\n      { key: \"multiplayer\", label: \"Real-time Collaboration\" },\n      { key: \"roles\", label: \"Custom Roles & Permissions\" },\n      { key: \"support\", label: \"Priority Team Support\" },\n    ],\n  },\n  {\n    title: \"DevOps\",\n    items: [\n      { key: \"orchestration\", label: \"Workflow Orchestration\" },\n      { key: \"deployment\", label: \"CI/CD Deployment\" },\n      { key: \"monitoring\", label: \"Performance Monitoring\" },\n      { key: \"apiAccess\", label: \"Developer API Access\" },\n    ],\n  },\n];\n\nexport default function PricingComparison({\n  plans = defaultPlans,\n  categories = defaultCategories,\n}: PricingComparisonProps) {\n  return (\n    <section className=\"py-20 lg:py-32\">\n      <div className=\"container mx-auto\">\n        {/* Top Section */}\n        <div className=\"text-center mb-12 max-w-2xl mx-auto\">\n          <Badge className=\"mb-4\">Pricing</Badge>\n          <h2 className=\"text-3xl md:text-5xl font-semibold tracking-tight\">\n            Prices that scale with your ambition\n          </h2>\n          <p className=\"text-lg text-muted-foreground mt-4\">\n            Choose a plan that fits your current needs — and grow into it with\n            advanced features as your team scales.\n          </p>\n          <div className=\"mt-8 p-2 bg-muted/40 dark:bg-zinc-900 text-xs text-gray-500\">\n            <p>\n              Note: All plans come with free onboarding, Slack support, and\n              access to monthly product updates.\n            </p>\n          </div>\n        </div>\n\n        {/* Pricing Table */}\n        <div className=\"grid md:grid-cols-4 gap-6 items-stretch\">\n          {/* Empty top-left */}\n          <div />\n\n          {/* Plan Cards */}\n          {plans.map((plan, index) => (\n            <div\n              key={index}\n              className=\"rounded-xl border border-muted bg-background p-6 flex flex-col justify-between shadow-sm\"\n            >\n              <div>\n                <h3 className=\"text-xl font-semibold mb-1\">{plan.name}</h3>\n                <p className=\"text-4xl font-bold\">{plan.price}</p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {plan.description}\n                </p>\n                <span className=\"text-sm text-muted-foreground\"> / month</span>\n              </div>\n              <Button\n                variant={plan.buttonVariant as any}\n                className=\"mt-6 gap-2\"\n              >\n                {plan.cta} {plan.icon}\n              </Button>\n            </div>\n          ))}\n\n          {/* Feature Rows */}\n          {categories.map((category, catIdx) => (\n            <React.Fragment key={catIdx}>\n              <div className=\"text-left font-semibold text-sm text-foreground py-4 px-2 border-t col-span-4\">\n                {category.title}\n              </div>\n              {category.items.map((feature, rowIdx) => (\n                <React.Fragment key={rowIdx}>\n                  <div className=\"text-sm text-muted-foreground py-3 px-2\">\n                    {feature.label}\n                  </div>\n                  {plans.map((plan, colIdx) => {\n                    const value =\n                      plan.features[feature.key as keyof typeof plan.features];\n                    return (\n                      <div\n                        key={`${feature.key}-${colIdx}`}\n                        className=\"flex items-center justify-center py-3\"\n                      >\n                        {typeof value === \"string\" ? (\n                          <span className=\"text-sm text-muted-foreground\">\n                            {value}\n                          </span>\n                        ) : value ? (\n                          <Check className=\"w-4 h-4 text-primary\" />\n                        ) : (\n                          <Minus className=\"w-4 h-4 text-muted-foreground\" />\n                        )}\n                      </div>\n                    );\n                  })}\n                </React.Fragment>\n              ))}\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-comparison.tsx"
    }
  ]
}