{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-3",
  "type": "registry:block",
  "description": "Three-tier pricing grid with interactive plan cards, badges, and feature lists.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing/3/pricing-section.tsx",
      "content": "\"use client\";\n\nimport { Briefcase, Building, CheckCircle2, Users } from \"lucide-react\";\nimport * as PricingCard from \"@/components/pricing-card\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport function PricingSection() {\n  const plans = [\n    {\n      icon: <Users />,\n      description: \"Perfect for individuals\",\n      name: \"Basic\",\n      price: \"Free\",\n      variant: \"outline\",\n      features: [\n        \"Automated Meeting Scheduling\",\n        \"Basic Calendar Sync\",\n        \"Daily Schedule Overview\",\n        \"Email Reminders\",\n        \"Task Management\",\n        \"24/7 Customer Support\",\n        \"Single User Access\",\n        \"Basic Reporting\",\n        \"Mobile App Access\",\n      ],\n    },\n    {\n      icon: <Briefcase />,\n      description: \"Ideal for small teams\",\n      name: \"Pro\",\n      badge: \"Popular\",\n      price: \"$29\",\n      original: \"$39\",\n      period: \"/month\",\n      variant: \"default\",\n      features: [\n        \"All Basic Plan Features\",\n        \"Advanced Calendar Integrations\",\n        \"Customizable Notifications\",\n        \"Priority Support\",\n        \"Analytics and Insights\",\n        \"Group Scheduling\",\n        \"Multiple User Roles\",\n        \"Advanced Reporting\",\n        \"Custom Branding Options\",\n      ],\n    },\n    {\n      icon: <Building />,\n      name: \"Enterprise\",\n      description: \"Perfect for large scale companies\",\n      price: \"$99\",\n      original: \"$129\",\n      period: \"/month\",\n      variant: \"outline\",\n      features: [\n        \"All Pro Plan Features\",\n        \"Dedicated Account Manager\",\n        \"Custom Integrations\",\n        \"Advanced Security Features\",\n        \"Team Collaboration Tools\",\n        \"Onboarding and Training\",\n        \"Unlimited Users\",\n        \"API Access with Higher Limits\",\n        \"Advanced Audit Logs\",\n      ],\n    },\n  ];\n\n  return (\n    <section className=\"mx-auto grid w-full max-w-4xl gap-4 p-6 md:grid-cols-3\">\n      {plans.map((plan, index) => (\n        <PricingCard.Card\n          className={cn(\"w-full max-w-full\", index === 1 && \"md:scale-105\")}\n          key={plan.name}\n        >\n          <PricingCard.Header>\n            <PricingCard.Plan>\n              <PricingCard.PlanName>\n                {plan.icon}\n                <span className=\"text-muted-foreground\">{plan.name}</span>\n              </PricingCard.PlanName>\n              {plan.badge && (\n                <PricingCard.Badge>{plan.badge}</PricingCard.Badge>\n              )}\n            </PricingCard.Plan>\n            <PricingCard.Price>\n              <PricingCard.MainPrice>{plan.price}</PricingCard.MainPrice>\n              <PricingCard.Period>{plan.period}</PricingCard.Period>\n              {plan.original && (\n                <PricingCard.OriginalPrice className=\"ml-auto\">\n                  {plan.original}\n                </PricingCard.OriginalPrice>\n              )}\n            </PricingCard.Price>\n            <Button\n              className={cn(\"w-full font-semibold\")}\n              variant={plan.variant as \"outline\" | \"default\"}\n            >\n              Get Started\n            </Button>\n          </PricingCard.Header>\n\n          <PricingCard.Body>\n            <PricingCard.Description>\n              {plan.description}\n            </PricingCard.Description>\n            <PricingCard.List>\n              {plan.features.map((item) => (\n                <PricingCard.ListItem className=\"text-xs\" key={item}>\n                  <CheckCircle2\n                    aria-hidden=\"true\"\n                    className=\"h-4 w-4 text-foreground\"\n                  />\n                  <span>{item}</span>\n                </PricingCard.ListItem>\n              ))}\n            </PricingCard.List>\n          </PricingCard.Body>\n        </PricingCard.Card>\n      ))}\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/pricing-card.tsx",
      "content": "import type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"relative w-full max-w-xs rounded-xl border bg-card dark:bg-transparent\",\n        \"p-1.5 shadow-sm backdrop-blur-xl\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({\n  className,\n  children,\n  glassEffect = true,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  glassEffect?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative mb-4 rounded-xl border bg-muted/50 p-4 shadow\",\n        className\n      )}\n      {...props}\n    >\n      {/* Top glass gradient */}\n      {glassEffect && (\n        <div\n          aria-hidden=\"true\"\n          className=\"-z-10 absolute inset-x-0 top-0 h-48 rounded-[inherit]\"\n          style={{\n            background:\n              \"linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0) 100%)\",\n          }}\n        />\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction Plan({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"mb-8 flex items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Description({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p className={cn(\"text-muted-foreground text-xs\", className)} {...props} />\n  );\n}\n\nfunction PlanName({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 font-medium text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Badge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"rounded-full border border-foreground/20 px-2 py-0.5 text-foreground/80 text-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Price({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"mb-3 flex items-end gap-1\", className)} {...props} />\n  );\n}\n\nfunction MainPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"font-extrabold text-3xl tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Period({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"pb-1 text-foreground/80 text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction OriginalPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"mr-1 ml-auto text-lg text-muted-foreground line-through\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Body({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"space-y-6 p-3\", className)} {...props} />;\n}\n\nfunction List({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return <ul className={cn(\"space-y-3\", className)} {...props} />;\n}\n\nfunction ListItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      className={cn(\n        \"flex items-start gap-3 text-muted-foreground text-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Separator({\n  children = \"Upgrade to access\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: string;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-3 text-muted-foreground text-sm\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"h-[1px] flex-1 bg-muted-foreground/40\" />\n      <span className=\"shrink-0 text-muted-foreground\">{children}</span>\n      <span className=\"h-[1px] flex-1 bg-muted-foreground/40\" />\n    </div>\n  );\n}\n\nexport {\n  Card,\n  Header,\n  Description,\n  Plan,\n  PlanName,\n  Badge,\n  Price,\n  MainPrice,\n  Period,\n  OriginalPrice,\n  Body,\n  List,\n  ListItem,\n  Separator,\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "pricing"
  ]
}