{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-cards-tooltip",
  "type": "registry:ui",
  "title": "Pricing Cards with Tooltips",
  "description": "A clean two-column pricing comparison with feature tooltips and corner decorations. Inspired by ZippyStarter design.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-cards-tooltip.tsx",
      "content": "\"use client\";\n\nimport { Check, Info } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\ninterface PricingFeature {\n  text: string;\n  tooltip?: string;\n}\n\ninterface PricingTier {\n  label: string;\n  price: string;\n  priceSuffix?: string;\n  cta: string;\n  ctaHref?: string;\n  description: string;\n  features: PricingFeature[];\n  highlighted?: boolean;\n}\n\ninterface PricingCardsTooltipProps {\n  tiers?: PricingTier[];\n  showCornerMarks?: boolean;\n  className?: string;\n}\n\nconst defaultTiers: PricingTier[] = [\n  {\n    label: \"STARTER\",\n    price: \"Free\",\n    cta: \"Get Started\",\n    ctaHref: \"#\",\n    description: \"Perfect for side projects and experimentation\",\n    features: [\n      {\n        text: \"Up to 3 projects\",\n        tooltip: \"Create and manage up to 3 active projects\",\n      },\n      {\n        text: \"Basic analytics\",\n        tooltip: \"Track page views and basic user metrics\",\n      },\n      {\n        text: \"Community support\",\n        tooltip: \"Get help from our active community forums\",\n      },\n      {\n        text: \"Standard API access\",\n        tooltip: \"1,000 API calls per month included\",\n      },\n      {\n        text: \"Email notifications\",\n        tooltip: \"Receive alerts for important events\",\n      },\n    ],\n  },\n  {\n    label: \"PRO\",\n    price: \"29\",\n    priceSuffix: \"/mo\",\n    cta: \"Upgrade to Pro\",\n    ctaHref: \"#\",\n    description: \"For professionals who need more power\",\n    highlighted: true,\n    features: [\n      {\n        text: \"Unlimited projects\",\n        tooltip: \"No limits on the number of projects you can create\",\n      },\n      {\n        text: \"Advanced analytics\",\n        tooltip: \"Detailed insights with custom dashboards and reports\",\n      },\n      {\n        text: \"Priority support\",\n        tooltip: \"Get responses within 24 hours from our team\",\n      },\n      {\n        text: \"Unlimited API access\",\n        tooltip: \"No rate limits on API calls\",\n      },\n      {\n        text: \"Custom integrations\",\n        tooltip: \"Connect with your favorite tools via webhooks\",\n      },\n      {\n        text: \"Team collaboration\",\n        tooltip: \"Invite up to 10 team members to your workspace\",\n      },\n      {\n        text: \"Export & backup\",\n        tooltip: \"Download your data anytime in multiple formats\",\n      },\n    ],\n  },\n];\n\nfunction CornerMark({ className }: { className?: string }) {\n  return (\n    <svg\n      className={cn(\"w-3 h-3 text-red-400\", className)}\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    >\n      <path d=\"M2 2L10 10M10 2L2 10\" />\n    </svg>\n  );\n}\n\nfunction FeatureRow({ feature }: { feature: PricingFeature }) {\n  return (\n    <li className=\"grid grid-cols-[1fr_auto] items-start gap-3 py-2\">\n      <div className=\"flex items-start gap-3\">\n        <Check className=\"w-4 h-4 mt-0.5 shrink-0 text-foreground\" />\n        <span className=\"text-sm text-foreground/80\">{feature.text}</span>\n      </div>\n      {feature.tooltip && (\n        <Tooltip delayDuration={100}>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"shrink-0 rounded-full p-0.5 text-muted-foreground/60 hover:text-muted-foreground transition-colors\"\n            >\n              <Info className=\"w-4 h-4\" />\n            </button>\n          </TooltipTrigger>\n          <TooltipContent\n            side=\"top\"\n            className=\"max-w-[200px] text-xs bg-foreground text-background\"\n          >\n            {feature.tooltip}\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </li>\n  );\n}\n\nfunction PricingCard({ tier }: { tier: PricingTier }) {\n  return (\n    <div className=\"flex flex-col h-full\">\n      {/* Label */}\n      <p className=\"text-xs font-medium tracking-[0.2em] text-muted-foreground uppercase mb-4\">\n        {tier.label}\n      </p>\n\n      {/* Price */}\n      <div className=\"mb-4\">\n        {tier.priceSuffix ? (\n          <div className=\"flex items-baseline gap-1\">\n            <span className=\"text-5xl md:text-6xl font-light tracking-tight text-foreground\">\n              {tier.price}\n            </span>\n            <span className=\"text-lg text-muted-foreground\">\n              {tier.priceSuffix}\n            </span>\n          </div>\n        ) : (\n          <span className=\"text-5xl md:text-6xl font-light tracking-tight text-foreground\">\n            {tier.price}\n          </span>\n        )}\n      </div>\n\n      {/* CTA Button */}\n      <a\n        href={tier.ctaHref || \"#\"}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium transition-colors mb-4\",\n          tier.highlighted\n            ? \"bg-gradient-to-r from-rose-400 to-red-400 text-white hover:from-rose-500 hover:to-red-500\"\n            : \"bg-foreground text-background hover:bg-foreground/90\",\n        )}\n      >\n        {tier.cta}\n      </a>\n\n      {/* Description */}\n      <p className=\"text-sm text-muted-foreground mb-6\">{tier.description}</p>\n\n      {/* Features */}\n      <ul className=\"space-y-0 divide-y divide-border/50\">\n        {tier.features.map((feature, idx) => (\n          <FeatureRow key={idx} feature={feature} />\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default function PricingCardsTooltip({\n  tiers = defaultTiers,\n  showCornerMarks = false,\n  className,\n}: PricingCardsTooltipProps) {\n  return (\n    <TooltipProvider>\n      <section className={cn(\"py-12 px-4 sm:px-6 lg:px-8\", className)}>\n        <div className=\"relative mx-auto max-w-4xl\">\n          {/* Corner marks */}\n          {showCornerMarks && (\n            <>\n              <CornerMark className=\"absolute -top-2 -left-2\" />\n              <CornerMark className=\"absolute -top-2 -right-2\" />\n              <CornerMark className=\"absolute -bottom-2 -left-2\" />\n              <CornerMark className=\"absolute -bottom-2 -right-2\" />\n              <CornerMark className=\"absolute -top-2 left-1/2 -translate-x-1/2\" />\n              <CornerMark className=\"absolute -bottom-2 left-1/2 -translate-x-1/2\" />\n            </>\n          )}\n\n          {/* Grid */}\n          <div className=\"grid md:grid-cols-2 gap-8 md:gap-12 lg:gap-16\">\n            {tiers.map((tier, idx) => (\n              <PricingCard key={idx} tier={tier} />\n            ))}\n          </div>\n        </div>\n      </section>\n    </TooltipProvider>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-cards-tooltip.tsx"
    }
  ]
}