{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-card",
  "type": "registry:ui",
  "title": "Pricing Card",
  "description": "A Pricing Card component for displaying pricing information.",
  "files": [
    {
      "path": "src/registry/ui/pricing-card.tsx",
      "type": "registry:ui",
      "content": "import { Check } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PricingCardProps = React.ComponentProps<\"div\"> & {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  /** Pre-formatted price, e.g. \"$9.99\" or \"Free\". */\n  price: React.ReactNode;\n  /** Shown after the price, e.g. \"/month\". */\n  period?: React.ReactNode;\n  features: React.ReactNode[];\n  /** Custom call to action (e.g. a Button or link). Takes precedence over ctaLabel. */\n  cta?: React.ReactNode;\n  ctaLabel?: React.ReactNode;\n  ctaHref?: string;\n  onCtaClick?: () => void;\n  highlighted?: boolean;\n  /** Shown next to the plan name, e.g. \"Popular\". */\n  badge?: React.ReactNode;\n};\n\nexport function PricingCard({\n  name,\n  description,\n  price,\n  period,\n  features,\n  cta,\n  ctaLabel,\n  ctaHref,\n  onCtaClick,\n  highlighted = false,\n  badge,\n  className,\n  ...props\n}: PricingCardProps) {\n  const variant = highlighted ? \"default\" : \"outline\";\n\n  let action = cta;\n  if (!action && ctaLabel) {\n    action = ctaHref ? (\n      <Button asChild variant={variant} className=\"w-full\">\n        <a href={ctaHref} onClick={onCtaClick}>\n          {ctaLabel}\n        </a>\n      </Button>\n    ) : (\n      <Button type=\"button\" variant={variant} className=\"w-full\" onClick={onCtaClick}>\n        {ctaLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"pricing-card\"\n      data-highlighted={highlighted || undefined}\n      className={cn(\n        \"flex h-full w-full max-w-sm flex-col gap-6 rounded-xl border bg-card p-6 text-card-foreground shadow-sm\",\n        highlighted && \"border-primary ring-1 ring-primary\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <h3 className=\"font-medium\">{name}</h3>\n          {badge && (\n            <span className=\"rounded-md bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground\">\n              {badge}\n            </span>\n          )}\n        </div>\n        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n        <p className=\"flex items-baseline gap-1\">\n          <span className=\"text-4xl font-semibold tracking-tight\">{price}</span>\n          {period && <span className=\"text-sm text-muted-foreground\">{period}</span>}\n        </p>\n      </div>\n\n      <ul className=\"flex-1 space-y-3 text-sm\">\n        {features.map((feature, i) => (\n          <li key={i} className=\"flex items-start gap-2\">\n            <Check aria-hidden className=\"mt-0.5 size-4 shrink-0 text-primary\" />\n            <span className=\"text-muted-foreground\">{feature}</span>\n          </li>\n        ))}\n      </ul>\n\n      {action}\n    </div>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ]
}