{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subscription-plans",
  "type": "registry:ui",
  "title": "Subscription Plans",
  "description": "A subscription-focused pricing component with billing options and features.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/ruixenui/subscription-plans.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { CheckCircle2 } from \"lucide-react\";\nimport Link from \"next/link\";\nimport React from \"react\";\n\ninterface Plan {\n  title: string;\n  price: string;\n  billing: string;\n  features: string[];\n  button: string;\n  recommended?: boolean;\n}\n\ninterface SubscriptionPlansProps {\n  plans?: Plan[];\n}\n\nconst defaultPlans: Plan[] = [\n  {\n    title: \"Starter Pack - Yearly Subscription\",\n    price: \"$19\",\n    billing: \"charged annually\",\n    features: [\n      \"Includes 40+ UI components and patterns\",\n      \"Access to 3 production-ready templates\",\n      \"License for personal and freelance projects\",\n      \"Continue using components after subscription ends\",\n    ],\n    button: \"Subscribe for a Year\",\n  },\n  {\n    title: \"Pro Pack - Lifetime Access\",\n    price: \"$39\",\n    billing: \"one-time fee\",\n    recommended: true,\n    features: [\n      \"Includes 40+ UI components and patterns\",\n      \"3 production templates built with React & Tailwind\",\n      \"Commercial license for client work\",\n      \"Lifetime usage with no renewals\",\n      \"Free access to all future updates and additions\",\n    ],\n    button: \"Buy Lifetime Access\",\n  },\n  {\n    title: \"Enterprise Pack\",\n    price: \"$59\",\n    billing: \"single payment\",\n    features: [\n      \"Everything from the Pro plan\",\n      \"Up to 20 team members included\",\n      \"Priority support & onboarding help\",\n    ],\n    button: \"Get Enterprise Plan\",\n  },\n];\n\nexport default function SubscriptionPlans({\n  plans = defaultPlans,\n}: SubscriptionPlansProps) {\n  return (\n    <section className=\"max-w-4xl mx-auto px-4 py-16 space-y-12\">\n      {/* Top 2 Plans */}\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 relative\">\n        {plans.slice(0, 2).map((plan, index) => (\n          <Card\n            key={index}\n            className={`flex flex-col rounded-none shadow-lg hover:shadow-xl transition-all duration-300 ${\n              plan.recommended\n                ? \"border-4 border-green-200 shadow-2xl\"\n                : \"border\"\n            }`}\n          >\n            <CardContent className=\"p-6 flex flex-col gap-5 flex-1\">\n              {plan.recommended && (\n                <span className=\"text-sm font-medium text-green-600\">\n                  Recommended\n                </span>\n              )}\n              <div>\n                <h3 className=\"text-2xl font-bold text-foreground\">\n                  {plan.title}\n                </h3>\n                <p className=\"text-4xl font-extrabold mt-2 text-foreground\">\n                  {plan.price}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">{plan.billing}</p>\n              </div>\n              <ul className=\"space-y-3\">\n                {plan.features.map((feature, idx) => (\n                  <li key={idx} className=\"flex items-start gap-2 text-[15px]\">\n                    <CheckCircle2 className=\"text-green-500 w-4 h-4 mt-1\" />\n                    <span className=\"text-foreground\">{feature}</span>\n                  </li>\n                ))}\n              </ul>\n            </CardContent>\n            <div className=\"p-6 pt-0\">\n              <Button className=\"w-full mt-4\" asChild>\n                <Link href=\"https://ruixen.com/?utm_source=21stdev&utm_medium=button&utm_campaign=ruixen_pricing\">\n                  {plan.button}\n                </Link>\n              </Button>\n            </div>\n          </Card>\n        ))}\n      </div>\n\n      {/* Enterprise Plan */}\n      {plans[2] && (\n        <div className=\"grid grid-cols-1 relative\">\n          <Card className=\"rounded-none shadow-lg border hover:shadow-xl transition-all duration-300\">\n            <CardContent className=\"p-6 flex flex-col gap-5\">\n              <h3 className=\"text-2xl font-bold text-foreground\">\n                {plans[2].title}\n              </h3>\n              <p className=\"text-4xl font-extrabold mt-2 text-foreground\">\n                {plans[2].price}\n              </p>\n              <p className=\"text-sm text-muted-foreground\">\n                {plans[2].billing}\n              </p>\n              <ul className=\"space-y-3 mt-2\">\n                {plans[2].features.map((feature, idx) => (\n                  <li key={idx} className=\"flex items-start gap-2 text-[15px]\">\n                    <CheckCircle2 className=\"text-green-500 w-4 h-4 mt-1\" />\n                    <span className=\"text-foreground\">{feature}</span>\n                  </li>\n                ))}\n              </ul>\n              <Button className=\"w-full mt-4\">\n                <Link href=\"https://ruixen.com/?utm_source=21stdev&utm_medium=button&utm_campaign=ruixen_pricing\">\n                  {plans[2].button}\n                </Link>\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      )}\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/subscription-plans.tsx"
    }
  ]
}