{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-1",
  "title": "Pricing 1: two tiers",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Two pricing cards side by side with included and excluded features, a highlighted plan with a border beam and badge, and small print.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/badge.json",
    "https://ui.ballmac.com/r/border-beam.json",
    "https://ui.ballmac.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/pricing-1/pricing-1.tsx",
      "content": "// Ballmac UI: Pricing 1. https://ui.ballmac.com/blocks/pricing-1\nimport * as React from \"react\"\nimport { Check, Minus } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { BorderBeam } from \"@/components/ballmac/border-beam\"\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Plan = {\n  name: string\n  price: string\n  period?: string\n  description: string\n  features: { label: string; included: boolean }[]\n  cta: { label: string; href: string }\n  featured?: boolean\n}\n\ntype Pricing1Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Section heading. */\n  title?: string\n  /** One sentence under the heading. */\n  description?: string\n  /** Exactly two plans read best; the featured one gets emphasis. */\n  plans?: Plan[]\n  /** Small print under the plans. */\n  note?: string\n}\n\nconst defaults: Plan[] = [\n  {\n    name: \"Hobby\",\n    price: \"$0\",\n    description: \"For side projects and trying things out.\",\n    features: [\n      { label: \"3 projects\", included: true },\n      { label: \"Deploy previews\", included: true },\n      { label: \"Community support\", included: true },\n      { label: \"Performance budgets\", included: false },\n      { label: \"Team roles\", included: false },\n    ],\n    cta: { label: \"Start free\", href: \"#\" },\n  },\n  {\n    name: \"Pro\",\n    price: \"$20\",\n    period: \"per member / month\",\n    description: \"For teams shipping to production every day.\",\n    features: [\n      { label: \"Unlimited projects\", included: true },\n      { label: \"Deploy previews\", included: true },\n      { label: \"Priority support\", included: true },\n      { label: \"Performance budgets\", included: true },\n      { label: \"Team roles\", included: true },\n    ],\n    cta: { label: \"Start 14-day trial\", href: \"#\" },\n    featured: true,\n  },\n]\n\nfunction Pricing1({\n  title = \"Simple pricing that scales with you.\",\n  description = \"Start free. Upgrade when your team does.\",\n  plans = defaults,\n  note = \"Prices in USD. Taxes may apply.\",\n  className,\n  ...props\n}: Pricing1Props) {\n  return (\n    <section data-slot=\"pricing-1\" className={cn(\"mx-auto max-w-5xl px-4 py-20 sm:px-6 md:py-28\", className)} {...props}>\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <h2 className=\"text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl\">{title}</h2>\n        <p className=\"mt-4 text-lg text-muted-foreground\">{description}</p>\n      </div>\n      <div className=\"mt-12 grid gap-5 md:grid-cols-2\">\n        {plans.map((plan) => (\n          <div key={plan.name} className={cn(\"relative flex flex-col rounded-2xl border bg-card p-8\", plan.featured && \"border-foreground/20 shadow-[0_30px_80px_-40px_rgb(0_0_0/0.35)]\")}>\n            {plan.featured && <BorderBeam duration={10} className=\"rounded-2xl\" />}\n            <div className=\"flex items-center justify-between gap-3\">\n              <h3 className=\"text-lg font-semibold\">{plan.name}</h3>\n              {plan.featured && <Badge>Most popular</Badge>}\n            </div>\n            <p className=\"mt-2 text-sm text-muted-foreground\">{plan.description}</p>\n            <p className=\"mt-6 flex items-baseline gap-2\">\n              <span className=\"text-5xl font-semibold tracking-[-0.04em]\">{plan.price}</span>\n              {plan.period && <span className=\"text-sm text-muted-foreground\">{plan.period}</span>}\n            </p>\n            <ul className=\"mt-8 flex-1 space-y-3 text-sm\">\n              {plan.features.map((f) => (\n                <li key={f.label} className={cn(\"flex items-start gap-3\", !f.included && \"text-muted-foreground\")}>\n                  {f.included ? <Check className=\"mt-0.5 size-4 shrink-0\" aria-label=\"Included\" /> : <Minus className=\"mt-0.5 size-4 shrink-0\" aria-label=\"Not included\" />}\n                  {f.label}\n                </li>\n              ))}\n            </ul>\n            <a className={buttonVariants({ variant: plan.featured ? \"default\" : \"outline\", size: \"lg\", shape: \"pill\", className: \"mt-8\" })} href={plan.cta.href}>{plan.cta.label}</a>\n          </div>\n        ))}\n      </div>\n      {note && <p className=\"mt-8 text-center text-sm text-muted-foreground\">{note}</p>}\n    </section>\n  )\n}\n\nexport { Pricing1, type Pricing1Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/pricing-1/pricing-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "pricing",
      "plans",
      "saas",
      "tiers"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "Pricing for a free-plus-paid or two-plan product. Pass plans=[{ name, price, period, description, features, cta, featured }].",
      "whenToUse": [
        "Freemium products",
        "Two-plan pricing pages"
      ],
      "whenNotToUse": [
        "Three or more plans side by side"
      ],
      "composesWith": [
        "faq-1",
        "cta-1"
      ],
      "a11y": [],
      "customization": [
        "plans: { name, price, period?, description, features: { label, included }[], cta, featured? }[]",
        "title, description, note props"
      ]
    },
    "examples": [
      "pricing-1-demo"
    ],
    "url": "https://ui.ballmac.com/components/pricing-1"
  },
  "categories": [
    "blocks",
    "pricing"
  ],
  "type": "registry:block"
}