{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-tiers",
  "type": "registry:ui",
  "title": "Pricing Tiers",
  "description": "Modern pricing component with customizable tiers, features, and glass morphism design.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-tiers.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport Link from \"next/link\";\nimport { Check } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\n// ----- Subcomponents -----\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"bg-card relative w-full rounded-xl dark:bg-transparent p-1.5 shadow-xl backdrop-blur-xl dark:border-border/80 border\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({\n  children,\n  className,\n  glassEffect = true,\n  ...props\n}: React.ComponentProps<\"div\"> & { glassEffect?: boolean }) {\n  return (\n    <div\n      className={cn(\n        \"bg-muted/80 dark:bg-muted/50 relative mb-4 rounded-xl border p-4\",\n        className,\n      )}\n      {...props}\n    >\n      {glassEffect && (\n        <div\n          aria-hidden=\"true\"\n          className=\"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 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        \"text-muted-foreground flex items-center gap-2 text-sm font-medium [&_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        \"border-foreground/20 text-foreground/80 rounded-full border px-2 py-0.5 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(\"text-3xl font-extrabold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Period({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"text-foreground/80 pb-1 text-sm\", className)}\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        \"text-muted-foreground flex items-start gap-3 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\"> & { children?: string }) {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground flex items-center gap-3 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"bg-muted-foreground/40 h-[1px] flex-1\" />\n      <span className=\"text-muted-foreground shrink-0\">{children}</span>\n      <span className=\"bg-muted-foreground/40 h-[1px] flex-1\" />\n    </div>\n  );\n}\n\n// ----- Configurable PricingTiers Component -----\nexport interface Plan {\n  title: string;\n  price: string;\n  period: string;\n  description: string;\n  features: string[];\n  badge?: string;\n}\n\ninterface PricingTiersProps {\n  plans: Plan[];\n  heading?: string;\n  subheading?: string;\n}\n\nexport default function PricingTiers({\n  plans,\n  heading = \"Flexible Plans for Everyone\",\n  subheading = \"Choose the plan that fits your workflow and budget.\",\n}: PricingTiersProps) {\n  return (\n    <section className=\"py-16 md:py-32\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"mx-auto max-w-2xl space-y-6 text-center\">\n          <h1 className=\"text-4xl font-semibold lg:text-5xl\">{heading}</h1>\n          <Description>{subheading}</Description>\n        </div>\n\n        <div className=\"mt-12 grid gap-6 md:mt-20 md:grid-cols-3\">\n          {plans.map((plan, idx) => (\n            <Card key={idx}>\n              <Header glassEffect>\n                <div className=\"flex flex-col items-start justify-between\">\n                  <PlanName>\n                    {plan.title} {plan.badge && <Badge>{plan.badge}</Badge>}\n                  </PlanName>\n                  <Price>\n                    <MainPrice>{plan.price}</MainPrice>\n                    <Period>{plan.period}</Period>\n                  </Price>\n                </div>\n                <Description>{plan.description}</Description>\n                <Button asChild variant=\"outline\" className=\"mt-4 w-full\">\n                  <Link href=\"#\">Get Started</Link>\n                </Button>\n              </Header>\n\n              <Body>\n                <Separator />\n                <List>\n                  {plan.features.map((feature, i) => (\n                    <ListItem key={i} className=\"flex items-center gap-2\">\n                      <Check className=\"size-4 text-foreground\" />\n                      {feature}\n                    </ListItem>\n                  ))}\n                </List>\n              </Body>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-tiers.tsx"
    }
  ]
}