{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "pricing-matrix-plan-cards",
  "title": "Pricing — Per-Plan Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/pricing-matrix-plan-cards/PricingMatrixPlanCards.svelte",
      "content": "<script lang=\"ts\">\n  import { Check, Minus } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent } from '$lib/components/ui/card'\n  import { Separator } from '$lib/components/ui/separator'\n  import { cn } from '$lib/utils'\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.\n  const 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\n  const 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<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      {#each plans as plan (plan.name)}\n        <Card class={cn('featured' in plan && 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              {#if 'featured' in plan && plan.featured}\n                <Badge variant=\"secondary\">Most chosen</Badge>\n              {/if}\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              {#each capabilities as capability, index (capability)}\n                <li\n                  class={cn(\n                    'flex items-start gap-2.5 text-sm',\n                    plan.included.includes(index) ? '' : 'text-muted-foreground/60',\n                  )}\n                >\n                  {#if plan.included.includes(index)}\n                    <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  {:else}\n                    <Minus class=\"text-muted-foreground/40 mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  {/if}\n                  <span>{capability}</span>\n                </li>\n              {/each}\n            </ul>\n\n            <Button\n              variant={'featured' in plan && plan.featured ? 'default' : 'outline'}\n              class=\"mt-auto pt-0 [&]:mt-8\"\n            >\n              {plan.name === 'Enterprise' ? 'Talk to us' : `Start on ${plan.name}`}\n            </Button>\n          </CardContent>\n        </Card>\n      {/each}\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/pricing-matrix-plan-cards/PricingMatrixPlanCards.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/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"
}