{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-card",
  "title": "Pricing card",
  "description": "one plan · 2–4 side by side · `highlighted` on one",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/badge",
    "card"
  ],
  "files": [
    {
      "path": "components/kit/pricing-card.tsx",
      "content": "import { CheckIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport type * as React from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Card } from '@/components/ui/card';\n\ntype Props = {\n  name: string;\n  price: string;\n  /** \"per month\", \"per seat / month\", \"one-off\". */\n  period?: string;\n  description?: string;\n  features: string[];\n  /** The plan's Button. */\n  action: React.ReactNode;\n  /** The recommended plan: a border and a badge. One per row. */\n  highlighted?: boolean;\n  badge?: string;\n  className?: string;\n};\n\n/** One plan. Show 2–4 side by side; highlight one. */\nexport function PricingCard({ name, price, period, description, features, action, highlighted, badge = 'Most popular', className }: Props) {\n  return (\n    <Card className={cn('relative flex flex-col gap-6 p-6', highlighted && 'border-primary ring-primary/20 ring-4', className)}>\n      {highlighted ? <Badge className=\"absolute -top-3 left-6\">{badge}</Badge> : null}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"font-semibold\">{name}</h3>\n        {description ? <p className=\"text-muted-foreground text-sm\">{description}</p> : null}\n      </div>\n      <p className=\"flex items-baseline gap-1\">\n        <span className=\"text-4xl font-semibold tracking-tight\">{price}</span>\n        {period ? <span className=\"text-muted-foreground text-sm\">{period}</span> : null}\n      </p>\n      <ul className=\"flex flex-col gap-2 text-sm\">\n        {features.map((f) => (\n          <li key={f} className=\"flex gap-2\">\n            <CheckIcon className=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden />\n            {f}\n          </li>\n        ))}\n      </ul>\n      <div className=\"mt-auto\">{action}</div>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/pricing-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PricingCard"
    ],
    "api": "<PricingCard name price period? description? features action highlighted? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "marketing"
  ],
  "type": "registry:component"
}