{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-1",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/pricing-1.tsx",
      "content": "import { MdCheckCircle } from \"react-icons/md\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PricingFeature {\n  text: string;\n}\n\nexport interface PricingPlan {\n  id: string;\n  title: string;\n  description: string;\n  price: string;\n  priceSuffix?: string;\n  features: PricingFeature[];\n  buttonText: string;\n  isPopular?: boolean;\n}\n\nexport interface Pricing1Props {\n  plans: PricingPlan[];\n  className?: string;\n}\n\nexport function Pricing1({ plans, className }: Pricing1Props) {\n  return (\n    <div\n      className={cn(\n        \"mx-auto w-full max-w-6xl px-4 md:px-6 py-4 md:py-8\",\n        className,\n      )}\n    >\n      <div className=\"bg-muted/40 rounded-none border p-2 shadow-sm md:p-3\">\n        <div className=\"grid grid-cols-1 gap-2 lg:grid-cols-3\">\n          {plans.map((plan) => (\n            <div\n              key={plan.id}\n              className={cn(\n                \"relative flex flex-col rounded-none p-6 transition-all sm:p-8\",\n                plan.isPopular\n                  ? \"bg-background border-border/50 border shadow-md\"\n                  : \"hover:bg-background/50 bg-transparent\",\n              )}\n            >\n              {plan.isPopular && (\n                <div className=\"absolute top-6 right-6\">\n                  <Badge\n                    variant=\"default\"\n                    className=\"rounded-none px-3 py-1 text-xs font-semibold shadow-[0px_0px_4px_1px_rgba(0,0,0,0.1),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_0.5px_0px_0px_rgba(255,255,255,0.35)]\"\n                  >\n                    Popular\n                  </Badge>\n                </div>\n              )}\n\n              <div className=\"mb-6\">\n                <h3 className=\"text-foreground mb-3 text-2xl font-bold tracking-tight\">\n                  {plan.title}\n                </h3>\n                <p className=\"text-muted-foreground min-h-[40px] pr-8 text-sm sm:pr-12\">\n                  {plan.description}\n                </p>\n              </div>\n\n              <div className=\"mb-6 flex items-baseline gap-2\">\n                <span className=\"text-foreground text-5xl font-extrabold tracking-tight\">\n                  {plan.price}\n                </span>\n                {plan.priceSuffix && (\n                  <span className=\"text-muted-foreground text-sm font-medium\">\n                    {plan.priceSuffix}\n                  </span>\n                )}\n              </div>\n\n              <div className=\"bg-border mb-8 h-[2px] w-1/3\" />\n\n              <ul className=\"mb-8 flex-1 space-y-4\">\n                {plan.features.map((feature, i) => (\n                  <li key={i} className=\"flex items-start gap-3\">\n                    <MdCheckCircle className=\"text-foreground mt-0.5 h-5 w-5 shrink-0\" />\n                    <span className=\"text-muted-foreground text-sm font-medium\">\n                      {feature.text}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n\n              <div className=\"mt-auto pt-4\">\n                {plan.isPopular ? (\n                  <Button\n                    size=\"lg\"\n                    className=\"border-primary flex h-14 w-full items-center justify-between rounded-none border px-6 font-semibold shadow-[0px_0px_4px_1px_rgba(0,0,0,0.1),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_1px_0px_0px_rgba(255,255,255,0.35)]\"\n                  >\n                    <span className=\"text-base\">Get started for</span>\n                    <div className=\"bg-primary-foreground/50 mx-4 h-[1px] flex-1\" />\n                    <span className=\"text-base\">{plan.buttonText}</span>\n                  </Button>\n                ) : (\n                  <Button className=\"group flex h-14 w-full cursor-pointer items-center justify-between border-0 bg-transparent px-2 outline-none\">\n                    <span className=\"text-foreground group-hover:text-primary text-base font-medium transition-colors\">\n                      Get started for\n                    </span>\n                    <div className=\"bg-border group-hover:bg-primary/20 mx-4 h-[2px] flex-1 transition-colors\" />\n                    <span className=\"text-foreground group-hover:text-primary text-base font-bold transition-colors\">\n                      {plan.buttonText}\n                    </span>\n                  </Button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-1.tsx"
    }
  ],
  "type": "registry:ui"
}