{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-v2",
  "title": "Pricing Section v2",
  "description": "Four-tier pricing grid with a monthly/yearly billing toggle, per-tier feature lists, and card-based layout.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/pricing-section-v2/page.tsx",
      "content": "import PricingSectionV2 from \"./components/pricing-section-v2\"\n\nexport default function Page() {\n  return <PricingSectionV2 />\n}\n",
      "type": "registry:page",
      "target": "app/pricing-section-v2/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v2/components/pricing-section-v2.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport PricingCard from \"./pricing-card\"\nimport { pricingPlans, type BillingCycle } from \"../lib/pricing-plans\"\n\nexport default function PricingSectionV2() {\n  const [billingCycle, setBillingCycle] = useState<BillingCycle>(\"monthly\")\n\n  return (\n    <section className=\"py-4 md:py-6 lg:py-8\">\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div className=\"mx-auto mb-10 max-w-3xl text-center\">\n          <h2 className=\"text-4xl font-medium tracking-tight text-balance md:text-5xl\">\n            Pricing\n          </h2>\n          <div className=\"mt-6 flex justify-center\">\n            <fieldset>\n              <legend className=\"sr-only\">Billing frequency</legend>\n              <div className=\"relative inline-grid grid-cols-2 rounded-full bg-muted p-0.5\">\n                <div\n                  aria-hidden\n                  className={cn(\n                    \"pointer-events-none absolute top-0.5 bottom-0.5 rounded-full border border-border bg-background shadow-sm transition-transform duration-200 ease-out\",\n                    billingCycle === \"yearly\" && \"translate-x-full\"\n                  )}\n                  style={{ left: \"2px\", width: \"calc(50% - 2px)\" }}\n                />\n                <label className=\"relative z-10 cursor-pointer rounded-full px-5 py-1.5 text-center\">\n                  <input\n                    checked={billingCycle === \"monthly\"}\n                    className=\"sr-only\"\n                    name=\"billing\"\n                    type=\"radio\"\n                    value=\"monthly\"\n                    onChange={() => setBillingCycle(\"monthly\")}\n                  />\n                  <span\n                    className={cn(\n                      \"text-sm font-medium leading-none transition-colors\",\n                      billingCycle === \"monthly\"\n                        ? \"text-foreground\"\n                        : \"text-muted-foreground\"\n                    )}\n                  >\n                    Monthly\n                  </span>\n                </label>\n                <label className=\"relative z-10 cursor-pointer rounded-full px-5 py-1.5 text-center\">\n                  <input\n                    checked={billingCycle === \"yearly\"}\n                    className=\"sr-only\"\n                    name=\"billing\"\n                    type=\"radio\"\n                    value=\"yearly\"\n                    onChange={() => setBillingCycle(\"yearly\")}\n                  />\n                  <span\n                    className={cn(\n                      \"text-sm font-medium leading-none transition-colors\",\n                      billingCycle === \"yearly\"\n                        ? \"text-foreground\"\n                        : \"text-muted-foreground\"\n                    )}\n                  >\n                    Yearly\n                  </span>\n                </label>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <ul className=\"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4\">\n          {pricingPlans.map((plan) => (\n            <PricingCard\n              key={plan.id}\n              billingCycle={billingCycle}\n              plan={plan}\n            />\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/pricing-section-v2/components/pricing-section-v2.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v2/components/pricing-card.tsx",
      "content": "import { CheckIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport type { BillingCycle, PricingPlan } from \"../lib/pricing-plans\"\n\ntype PricingCardProps = {\n  plan: PricingPlan\n  billingCycle: BillingCycle\n}\n\nexport default function PricingCard({ plan, billingCycle }: PricingCardProps) {\n  const pricing = billingCycle === \"yearly\" ? plan.yearly : plan.monthly\n\n  return (\n    <li className=\"min-w-0\">\n      <Card className=\"flex h-full flex-col justify-between rounded-sm p-5 shadow-none gap-4\">\n        <div>\n          <p className=\"text-3xl font-semibold tracking-tight text-foreground\">{plan.name}</p>\n          <p className=\"mt-2 text-2xl font-medium text-muted-foreground\">\n            {pricing.price}\n          </p>\n          <p className=\"mt-4 text-sm text-foreground\">{plan.intro}</p>\n          <ul className=\"mt-2 flex flex-col gap-1.5\">\n            {plan.features.map((feature) => (\n              <li\n                key={feature}\n                className=\"flex items-start gap-2 text-xs leading-relaxed font-light text-foreground\"\n              >\n                <CheckIcon\n                  aria-hidden\n                  className=\"mt-0.5 size-3.5 shrink-0 text-foreground\"\n                />\n                <span>{feature}</span>\n              </li>\n            ))}\n          </ul>\n        </div>\n        <div className=\"mt-6\">\n          <Button\n            size=\"lg\"\n            className=\"rounded-full\"\n            variant={plan.ctaVariant ?? \"default\"}\n          >\n            {plan.ctaLabel}\n          </Button>\n        </div>\n      </Card>\n    </li>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/pricing-section-v2/components/pricing-card.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v2/lib/pricing-plans.ts",
      "content": "export type BillingCycle = \"monthly\" | \"yearly\"\n\nexport type PricingPlan = {\n  id: \"hobby\" | \"pro\" | \"teams\" | \"enterprise\"\n  name: string\n  monthly: { price: string }\n  yearly: { price: string }\n  intro: string\n  features: string[]\n  ctaLabel: string\n  ctaVariant?: \"default\" | \"outline\"\n}\n\nexport const pricingPlans: PricingPlan[] = [\n  {\n    id: \"hobby\",\n    name: \"Hobby\",\n    monthly: { price: \"Free\" },\n    yearly: { price: \"Free\" },\n    intro: \"Includes:\",\n    features: [\n      \"1 workspace\",\n      \"Up to 3 active projects\",\n      \"100 tasks per month\",\n      \"Basic workflow templates\",\n    ],\n    ctaLabel: \"Get started\",\n    ctaVariant: \"outline\",\n  },\n  {\n    id: \"pro\",\n    name: \"Pro\",\n    monthly: { price: \"$20\" },\n    yearly: { price: \"$16\" },\n    intro: \"Everything in Hobby, plus:\",\n    features: [\n      \"Unlimited active projects\",\n      \"Unlimited tasks\",\n      \"Custom automations\",\n      \"50+ app integrations\",\n      \"Priority email support\",\n    ],\n    ctaLabel: \"Get Pro\",\n  },\n  {\n    id: \"teams\",\n    name: \"Teams\",\n    monthly: { price: \"$40\" },\n    yearly: { price: \"$32\" },\n    intro: \"Everything in Pro, plus:\",\n    features: [\n      \"Up to 25 seats\",\n      \"Shared dashboards and reporting\",\n      \"Role-based access control\",\n      \"Admin controls and permissions\",\n      \"SSO and SAML\",\n      \"SLA-backed uptime\",\n    ],\n    ctaLabel: \"Get Teams\",\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise\",\n    monthly: { price: \"Custom\" },\n    yearly: { price: \"Custom\" },\n    intro: \"Everything in Teams, plus:\",\n    features: [\n      \"Unlimited seats\",\n      \"Dedicated infrastructure\",\n      \"Custom data retention policies\",\n      \"SOC 2 Type II compliance\",\n      \"Tailored onboarding\",\n      \"24/7 dedicated support\",\n    ],\n    ctaLabel: \"Contact sales\",\n    ctaVariant: \"outline\",\n  },\n]\n",
      "type": "registry:lib",
      "target": "app/pricing-section-v2/lib/pricing-plans.ts"
    }
  ],
  "type": "registry:block"
}