{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "plan-card",
  "type": "registry:ui",
  "title": "Plan card",
  "description": "A pricing plan card with the plan name, a large price per period, a feature list and a full width call to action. A highlighted prop marks the recommended tier.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/plan-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/plan-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/** PlanCard — a pricing tier with price per period, feature list and a call to action; highlighted tiers get the accent ring. */\n\n// The Lumen Pro tier.\nconst SAMPLE_FEATURES = [\"Unlimited invoices\", \"Up to 10 seats\", \"Bank sync and reconciliation\", \"Priority support\"]\n\ntype PlanCardProps = {\n  name?: string\n  price?: string\n  period?: string\n  features?: string[]\n  cta?: string\n  highlighted?: boolean\n  className?: string\n  onCta?: () => void\n}\n\nfunction PlanCard({ name = \"Pro\", price = \"$49\", period = \"mo\", features = SAMPLE_FEATURES, cta = \"Choose plan\", highlighted, className, onCta }: PlanCardProps) {\n  return (\n    <div data-slot=\"plan-card\" className={cn(\"flex flex-col rounded-xl border border-border bg-surface p-5 shadow-highlight\", highlighted && \"border-accent shadow-[inset_0_0_0_1px_var(--accent)]\", className)}>\n      <h3 className=\"text-sm font-medium text-fg\">{name}</h3>\n      <p className=\"mt-3 text-3xl font-medium tracking-[-0.022em] tabular-nums text-fg\">{price}<span className=\"text-sm text-fg-muted\">/{period}</span></p>\n      <ul className=\"mt-4 flex-1 space-y-2 text-sm text-fg-muted\">{features.map(f=><li key={f}>• {f}</li>)}</ul>\n      <Button className=\"mt-6 w-full\" variant={highlighted?\"default\":\"outline\"} onClick={onCta}>{cta}</Button>\n    </div>\n  )\n}\nexport { PlanCard }\nexport type { PlanCardProps }\n"
    }
  ]
}