{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing",
  "type": "registry:ui",
  "title": "Pricing",
  "description": "Three-tier pricing section.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://starkui.vercel.app/r/badge.json",
    "https://starkui.vercel.app/r/button.json"
  ],
  "files": [
    {
      "path": "registry/starkui/pricing.tsx",
      "content": "import { Check } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PricingTier {\n  name: string;\n  price: string;\n  period?: string;\n  description: string;\n  features: string[];\n  cta?: string;\n  highlighted?: boolean;\n}\n\nexport function Pricing({ tiers }: { tiers: PricingTier[] }) {\n  return (\n    <section className=\"mx-auto grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {tiers.map((tier) => (\n        <div\n          key={tier.name}\n          className={cn(\n            \"relative flex flex-col rounded-[2rem] border border-border/60 bg-background p-8 shadow-sm transition-all duration-300 hover:border-border/80 hover:shadow-md\",\n            tier.highlighted && \"border-foreground/80 shadow-md ring-1 ring-foreground/20\"\n          )}\n        >\n          <div className=\"flex items-center justify-between\">\n            <h3 className=\"text-base font-semibold tracking-tight\">{tier.name}</h3>\n            {tier.highlighted && <Badge showDot variant=\"default\">Popular</Badge>}\n          </div>\n          <div className=\"mt-5 flex items-baseline gap-1\">\n            <span className=\"text-4xl font-bold tracking-tight text-foreground\">\n              {tier.price}\n            </span>\n            {tier.period && (\n              <span className=\"text-sm text-muted-foreground\">\n                /{tier.period}\n              </span>\n            )}\n          </div>\n          <p className=\"mt-2 text-sm text-muted-foreground leading-relaxed\">\n            {tier.description}\n          </p>\n          <div className=\"my-6 h-px w-full bg-border/40\" />\n          <ul className=\"flex-1 space-y-3\">\n            {tier.features.map((f) => (\n              <li key={f} className=\"flex items-center gap-2.5 text-sm text-muted-foreground\">\n                <Check className=\"h-4 w-4 shrink-0 text-foreground\" />\n                <span>{f}</span>\n              </li>\n            ))}\n          </ul>\n          <Button\n            className=\"mt-8 w-full\"\n            variant={tier.highlighted ? \"glow\" : \"outline\"}\n            size=\"lg\"\n          >\n            {tier.cta ?? \"Get started\"}\n          </Button>\n        </div>\n      ))}\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pricing.tsx"
    }
  ]
}