{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-matrix-plan-cards",
  "title": "Pricing — Per-Plan Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-matrix-plan-cards/PricingMatrixPlanCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// One capability list, three plans referencing it by index — a capability can\n// never appear on one card and silently vanish from another.\nconst capabilities = [\n  'Certified metric definitions',\n  'Connected warehouses',\n  'Query budget per team',\n  'Row-level access control',\n  'SCIM provisioning',\n  'Audit log export',\n  'Embedded dashboards',\n  'Data residency choice',\n  'Customer-managed keys',\n  'Named support engineer',\n]\n\nconst plans = [\n  { name: 'Team', price: '$0', cadence: 'while in beta', included: [0, 1], note: 'For one team proving it out.' },\n  {\n    name: 'Business',\n    price: '$1,400',\n    cadence: 'per month',\n    included: [0, 1, 2, 3, 4, 5, 6],\n    note: 'For finance and analytics running together.',\n    featured: true,\n  },\n  {\n    name: 'Enterprise',\n    price: 'Custom',\n    cadence: 'annual',\n    included: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n    note: 'For regulated estates and multi-region.',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-plan-cards\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Plans</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What each plan actually includes</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          The same list on every card, with what is missing shown rather than omitted.\n        </p>\n      </div>\n\n      <div class=\"mt-10 grid gap-4 lg:grid-cols-3\">\n        <Card v-for=\"plan in plans\" :key=\"plan.name\" :class=\"plan.featured ? 'border-primary' : ''\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <p class=\"text-sm font-semibold\">{{ plan.name }}</p>\n              <Badge v-if=\"plan.featured\" variant=\"secondary\">Most chosen</Badge>\n            </div>\n\n            <p class=\"font-display mt-4 text-3xl font-bold tracking-tight\">{{ plan.price }}</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">{{ plan.cadence }}</p>\n            <p class=\"text-muted-foreground mt-3 text-sm leading-relaxed\">{{ plan.note }}</p>\n\n            <Separator class=\"my-5\" />\n\n            <ul class=\"space-y-2.5\">\n              <li\n                v-for=\"(capability, index) in capabilities\"\n                :key=\"capability\"\n                class=\"flex items-start gap-2.5 text-sm\"\n                :class=\"plan.included.includes(index) ? '' : 'text-muted-foreground/60'\"\n              >\n                <Check\n                  v-if=\"plan.included.includes(index)\"\n                  class=\"text-success mt-0.5 size-4 shrink-0\"\n                  aria-hidden=\"true\"\n                />\n                <Minus v-else class=\"text-muted-foreground/40 mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                <span>{{ capability }}</span>\n              </li>\n            </ul>\n\n            <Button :variant=\"plan.featured ? 'default' : 'outline'\" class=\"mt-auto pt-0 [&]:mt-8\">\n              {{ plan.name === 'Enterprise' ? 'Talk to us' : `Start on ${plan.name}` }}\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PricingMatrixPlanCards.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Plan-first comparison that renders each plan as its own card of included and excluded capabilities, the layout a wide matrix should degrade to on a phone.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}