{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-matrix-sticky-header",
  "title": "Pricing — Sticky Header Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-matrix-sticky-header/PricingMatrixStickyHeader.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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\n// Cells are true / false / a string, so a plan can state a limit rather than\n// only claiming a feature exists.\nconst rows = [\n  { feature: 'Certified metric definitions', values: ['50', '500', 'Unlimited'] },\n  { feature: 'Connected warehouses', values: ['1', '3', 'Unlimited'] },\n  { feature: 'Query budget per team', values: [false, true, true] },\n  { feature: 'Row-level access control', values: [false, true, true] },\n  { feature: 'SCIM provisioning', values: [false, true, true] },\n  { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n  { feature: 'Period locking', values: [false, true, true] },\n  { feature: 'Embedded dashboards', values: [false, true, true] },\n  { feature: 'Data residency choice', values: [false, false, true] },\n  { feature: 'Customer-managed keys', values: [false, false, true] },\n  { feature: 'Private link', values: [false, false, true] },\n  { feature: 'Named support engineer', values: [false, false, true] },\n]\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-sticky-header\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Compare plans</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Every line, no asterisks</h2>\n      <p class=\"text-muted-foreground mt-3 text-lg\">\n        Limits differ between plans. Where a plan caps something, the cap is written in the cell.\n      </p>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <!-- The header pins with CSS alone. Thirty rows down, a checkmark is\n               still attributable to a column without scrolling back up. -->\n          <div class=\"max-h-[28rem] overflow-auto\">\n            <Table>\n              <TableHeader class=\"bg-card sticky top-0 z-10\">\n                <TableRow>\n                  <TableHead class=\"bg-card\">Capability</TableHead>\n                  <TableHead v-for=\"plan in plans\" :key=\"plan\" class=\"bg-card text-center\">{{ plan }}</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow v-for=\"row in rows\" :key=\"row.feature\">\n                  <TableCell class=\"font-medium\">{{ row.feature }}</TableCell>\n                  <TableCell v-for=\"(value, index) in row.values\" :key=\"index\" class=\"text-center\">\n                    <template v-if=\"value === true\">\n                      <Check class=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                      <span class=\"sr-only\">Included</span>\n                    </template>\n                    <template v-else-if=\"value === false\">\n                      <Minus class=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                      <span class=\"sr-only\">Not included</span>\n                    </template>\n                    <span v-else class=\"font-mono text-xs\">{{ value }}</span>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        <Button>Start on Team</Button>\n        <Button variant=\"outline\">Talk about Enterprise</Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PricingMatrixStickyHeader.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/table.json"
  ],
  "description": "Long feature matrix whose plan header row pins to the top while the body scrolls, so the column a checkmark belongs to stays identifiable at any scroll depth.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}