{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-matrix-sticky-header",
  "title": "Pricing — Sticky Header Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-matrix-sticky-header/PricingMatrixStickyHeader.tsx",
      "content": "'use client'\n\nimport { Check, Minus } from 'lucide-react'\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: { feature: string; values: (boolean | string)[] }[] = [\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\nexport function PricingMatrixStickyHeader() {\n  return (\n    <section data-slot=\"pricing-matrix-sticky-header\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Compare plans</Badge>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Every line, no asterisks</h2>\n        <p className=\"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 className=\"mt-8\">\n          <CardContent className=\"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 className=\"max-h-[28rem] overflow-auto\">\n              <Table>\n                <TableHeader className=\"bg-card sticky top-0 z-10\">\n                  <TableRow>\n                    <TableHead className=\"bg-card\">Capability</TableHead>\n                    {plans.map((plan) => (\n                      <TableHead key={plan} className=\"bg-card text-center\">\n                        {plan}\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  {rows.map((row) => (\n                    <TableRow key={row.feature}>\n                      <TableCell className=\"font-medium\">{row.feature}</TableCell>\n                      {row.values.map((value, index) => (\n                        <TableCell key={index} className=\"text-center\">\n                          {value === true && (\n                            <>\n                              <Check className=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                              <span className=\"sr-only\">Included</span>\n                            </>\n                          )}\n                          {value === false && (\n                            <>\n                              <Minus className=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                              <span className=\"sr-only\">Not included</span>\n                            </>\n                          )}\n                          {typeof value === 'string' && <span className=\"font-mono text-xs\">{value}</span>}\n                        </TableCell>\n                      ))}\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </div>\n          </CardContent>\n        </Card>\n\n        <div className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PricingMatrixStickyHeader.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
}