{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-section-v5",
  "title": "Pricing Section v5",
  "description": "Three-tier pricing cards with a left-aligned headline, popular Pro plan, per-feature Tabler icons, and pill CTAs.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/pricing-section-v5/page.tsx",
      "content": "import PricingSectionV5 from \"./components/pricing-section-v5\"\n\nexport default function Page() {\n  return <PricingSectionV5 />\n}\n",
      "type": "registry:page",
      "target": "app/pricing-section-v5/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v5/components/pricing-section-v5.tsx",
      "content": "import PricingCard from \"./pricing-card\"\nimport { pricingPlans } from \"../lib/pricing-plans\"\n\nexport default function PricingSectionV5() {\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        <h2 className=\"max-w-2xl text-3xl font-medium tracking-tight text-balance text-foreground md:text-4xl lg:text-5xl lg:leading-[1.1]\">\n          Straightforward plans for every stage\n        </h2>\n        <ul className=\"mt-10 grid grid-cols-1 rounded-none border border-border bg-background lg:grid-cols-3 lg:grid-rows-[auto_auto_auto_auto_auto_1fr_auto]\">\n          {pricingPlans.map((plan) => (\n            <PricingCard key={plan.id} plan={plan} />\n          ))}\n        </ul>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/pricing-section-v5/components/pricing-section-v5.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v5/components/pricing-card.tsx",
      "content": "import type { Icon } from \"@tabler/icons-react\"\nimport {\n  IconChartLine,\n  IconClock,\n  IconCoins,\n  IconCpu,\n  IconFolders,\n  IconGauge,\n  IconGitBranch,\n  IconGlobe,\n  IconHeadset,\n  IconKey,\n  IconLink,\n  IconServer,\n  IconShield,\n  IconShieldCheck,\n  IconShieldOff,\n  IconSnowflake,\n  IconStopwatch,\n  IconUsers,\n  IconWallet,\n} from \"@tabler/icons-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport type { FeatureIcon, PricingPlan } from \"../lib/pricing-plans\"\n\nconst featureIcons: Record<FeatureIcon, Icon> = {\n  timer: IconStopwatch,\n  \"git-branch\": IconGitBranch,\n  shield: IconShield,\n  globe: IconGlobe,\n  cpu: IconCpu,\n  \"shield-ban\": IconShieldOff,\n  activity: IconChartLine,\n  \"circle-dollar-sign\": IconCoins,\n  gauge: IconGauge,\n  wallet: IconWallet,\n  users: IconUsers,\n  snowflake: IconSnowflake,\n  link: IconLink,\n  \"key-round\": IconKey,\n  \"folder-sync\": IconFolders,\n  \"shield-plus\": IconShieldCheck,\n  server: IconServer,\n  clock: IconClock,\n  headset: IconHeadset,\n}\n\ntype PricingCardProps = {\n  plan: PricingPlan\n}\n\nexport default function PricingCard({ plan }: PricingCardProps) {\n  return (\n    <li\n      className={cn(\n        \"flex min-w-0 flex-col border-border p-6\",\n        \"border-b last:border-b-0 lg:row-span-7 lg:grid lg:grid-rows-subgrid lg:border-b-0 lg:border-r lg:last:border-r-0\",\n        plan.popular && \"bg-muted/40\"\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <h3 className=\"text-sm font-medium text-foreground\">{plan.name}</h3>\n        {plan.popular ? (\n          <span className=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n            Popular\n          </span>\n        ) : null}\n      </div>\n\n      <p className=\"mt-4 flex items-baseline gap-1 lg:mt-0 lg:pt-4\">\n        <span className=\"text-4xl font-semibold tracking-tight text-foreground md:text-5xl\">\n          {plan.price}\n        </span>\n        {plan.priceSuffix ? (\n          <span className=\"text-sm text-muted-foreground\">\n            {plan.priceSuffix}\n          </span>\n        ) : null}\n      </p>\n\n      <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground lg:mt-0 lg:pt-3\">\n        {plan.description}\n      </p>\n\n      <div className=\"py-5\" aria-hidden>\n        <div className=\"h-px w-full bg-border\" />\n      </div>\n\n      <p\n        className={cn(\n          \"pb-4 text-sm text-muted-foreground\",\n          !plan.featuresIntro && \"invisible\"\n        )}\n      >\n        {plan.featuresIntro ?? \"Everything included:\"}\n      </p>\n\n      <ul className=\"flex flex-col gap-3\">\n        {plan.features.map((feature) => {\n          const Icon = featureIcons[feature.icon]\n          return (\n            <li\n              key={feature.label}\n              className=\"flex items-start gap-2.5 text-sm leading-relaxed text-foreground\"\n            >\n              <Icon\n                aria-hidden\n                className=\"mt-0.5 size-4 shrink-0 text-foreground\"\n                stroke={1.5}\n              />\n              <span>{feature.label}</span>\n            </li>\n          )\n        })}\n      </ul>\n\n      <div className=\"mt-auto pt-8\">\n        <Button\n          size=\"lg\"\n          className=\"rounded-full px-5\"\n          variant={plan.ctaVariant}\n        >\n          {plan.ctaLabel}\n        </Button>\n      </div>\n    </li>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/pricing-section-v5/components/pricing-card.tsx"
    },
    {
      "path": "registry/new-york/blocks/pricing-section-v5/lib/pricing-plans.ts",
      "content": "export type FeatureIcon =\n  | \"timer\"\n  | \"git-branch\"\n  | \"shield\"\n  | \"globe\"\n  | \"cpu\"\n  | \"shield-ban\"\n  | \"activity\"\n  | \"circle-dollar-sign\"\n  | \"gauge\"\n  | \"wallet\"\n  | \"users\"\n  | \"snowflake\"\n  | \"link\"\n  | \"key-round\"\n  | \"folder-sync\"\n  | \"shield-plus\"\n  | \"server\"\n  | \"clock\"\n  | \"headset\"\n\nexport type PricingFeature = {\n  icon: FeatureIcon\n  label: string\n}\n\nexport type PricingPlan = {\n  id: \"hobby\" | \"pro\" | \"enterprise\"\n  name: string\n  description: string\n  price: string\n  priceSuffix?: string\n  popular?: boolean\n  featuresIntro?: string\n  features: PricingFeature[]\n  ctaLabel: string\n  ctaVariant: \"default\" | \"outline\"\n}\n\nexport const pricingPlans: PricingPlan[] = [\n  {\n    id: \"hobby\",\n    name: \"Hobby\",\n    description:\n      \"The perfect starting place for your web app or personal project.\",\n    price: \"$0\",\n    priceSuffix: \"/mo.\",\n    ctaLabel: \"Get started free\",\n    ctaVariant: \"outline\",\n    features: [\n      { icon: \"timer\", label: \"Unlimited personal workspaces\" },\n      { icon: \"git-branch\", label: \"Version history for every project\" },\n      { icon: \"shield\", label: \"Secure by default project links\" },\n      { icon: \"globe\", label: \"Share previews with a public URL\" },\n      { icon: \"cpu\", label: \"Core automation templates\" },\n      { icon: \"shield-ban\", label: \"Spam and abuse filtering\" },\n      { icon: \"activity\", label: \"Basic usage and activity charts\" },\n    ],\n  },\n  {\n    id: \"pro\",\n    name: \"Pro\",\n    description: \"Everything you need to build and scale your app.\",\n    price: \"$20\",\n    priceSuffix: \"/mo.\",\n    popular: true,\n    featuresIntro: \"Includes Hobby, plus:\",\n    ctaLabel: \"Start Pro trial\",\n    ctaVariant: \"default\",\n    features: [\n      { icon: \"circle-dollar-sign\", label: \"Included monthly credits\" },\n      {\n        icon: \"gauge\",\n        label: \"Higher throughput on shared workloads\",\n      },\n      { icon: \"wallet\", label: \"Spend alerts before you overshoot\" },\n      {\n        icon: \"users\",\n        label: \"Invite teammates with role-based access\",\n      },\n      { icon: \"snowflake\", label: \"Priority queue for heavy jobs\" },\n      { icon: \"link\", label: \"Branded share links and domains\" },\n    ],\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise\",\n    description:\n      \"Critical security, performance, observability, platform SLAs, and support.\",\n    price: \"Custom\",\n    featuresIntro: \"Includes Pro, plus:\",\n    ctaLabel: \"Talk to sales\",\n    ctaVariant: \"outline\",\n    features: [\n      { icon: \"key-round\", label: \"Org-wide permission policies\" },\n      { icon: \"folder-sync\", label: \"Directory sync for your IdP\" },\n      { icon: \"shield-plus\", label: \"Custom security rule sets\" },\n      { icon: \"server\", label: \"Isolated environments per region\" },\n      { icon: \"clock\", label: \"Contracted response times\" },\n      { icon: \"headset\", label: \"Named account support\" },\n    ],\n  },\n]\n",
      "type": "registry:lib",
      "target": "app/pricing-section-v5/lib/pricing-plans.ts"
    }
  ],
  "type": "registry:block"
}