{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-vertical-tabs-pane",
  "title": "Features — Vertical Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-vertical-tabs-pane/FeatureVerticalTabsPane.tsx",
      "content": "'use client'\n\nimport { Check } from 'lucide-react'\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'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst features = [\n  {\n    id: 'definitions',\n    title: 'Versioned definitions',\n    summary: 'Reviewed like code',\n    body: 'Every metric is a file with an owner. Changing one opens a pull request carrying a diff, a reviewer, and a revert path — the same workflow the rest of your repo already uses.',\n    points: ['Branch per change', 'Required review', 'One-click revert'],\n    rows: [\n      { name: 'revenue_net', detail: 'v128 · finance' },\n      { name: 'margin_by_channel', detail: 'v41 · finance' },\n      { name: 'pipeline_weighted', detail: 'v12 · revops' },\n    ],\n  },\n  {\n    id: 'access',\n    title: 'Query-time access',\n    summary: 'Scope per identity',\n    body: 'Row-level scope resolves from your identity provider on every query. A dashboard link shared outside its audience renders the sender’s scope, never the recipient’s.',\n    points: ['SCIM group sync', 'Per-query evaluation', 'Audited'],\n    rows: [\n      { name: 'EMEA analyst', detail: 'region-scoped' },\n      { name: 'Finance lead', detail: 'full ledger' },\n      { name: 'Contractor', detail: 'no payroll' },\n    ],\n  },\n  {\n    id: 'cost',\n    title: 'Budgeted queries',\n    summary: 'Capped at run time',\n    body: 'Each team gets a budget the query planner enforces before execution, so warehouse spend is bounded rather than explained after the invoice arrives.',\n    points: ['Per-team ceilings', 'Materialised hot paths', 'Cost per dashboard'],\n    rows: [\n      { name: 'Finance', detail: '62% of budget' },\n      { name: 'RevOps', detail: '38% of budget' },\n      { name: 'Product', detail: '81% of budget' },\n    ],\n  },\n]\n\nexport function FeatureVerticalTabsPane() {\n  return (\n    <section data-slot=\"feature-vertical-tabs-pane\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Platform</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three things worth the detail</h2>\n        </div>\n\n        <Tabs defaultValue=\"definitions\" orientation=\"vertical\" className=\"mt-10\">\n          <div className=\"grid gap-8 lg:grid-cols-[20rem_1fr] lg:gap-12\">\n            <TabsList variant=\"underline\" orientation=\"vertical\" className=\"h-auto w-full flex-col items-stretch\">\n              {features.map((feature) => (\n                <TabsTrigger\n                  key={feature.id}\n                  value={feature.id}\n                  variant=\"underline\"\n                  orientation=\"vertical\"\n                  className=\"h-auto flex-col items-start gap-0.5 py-3 text-left\"\n                >\n                  <span className=\"text-sm font-medium\">{feature.title}</span>\n                  <span className=\"text-muted-foreground text-xs\">{feature.summary}</span>\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {features.map((feature) => (\n              <TabsContent key={feature.id} value={feature.id} className=\"mt-0\">\n                {/* min-h holds the pane at the tallest panel so switching tabs\n                    never resizes the section. */}\n                <div className=\"grid min-h-[19rem] gap-6 sm:grid-cols-[1.2fr_1fr]\">\n                  <div>\n                    <h3 className=\"text-xl font-semibold tracking-tight\">{feature.title}</h3>\n                    <p className=\"text-muted-foreground mt-3 leading-relaxed\">{feature.body}</p>\n                    <ul className=\"mt-5 space-y-2\">\n                      {feature.points.map((point) => (\n                        <li key={point} className=\"flex items-start gap-2.5 text-sm\">\n                          <Check className=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                          <span>{point}</span>\n                        </li>\n                      ))}\n                    </ul>\n                    <Button variant=\"link\" className=\"mt-5 h-auto p-0\">\n                      Read the reference\n                    </Button>\n                  </div>\n\n                  <Card className=\"self-start\">\n                    <CardContent className=\"p-0\">\n                      <div className=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                        {feature.summary}\n                      </div>\n                      <ul className=\"divide-border divide-y\">\n                        {feature.rows.map((row) => (\n                          <li key={row.name} className=\"flex items-center justify-between gap-3 px-4 py-2.5\">\n                            <span className=\"min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                            <span className=\"text-muted-foreground shrink-0 text-xs\">{row.detail}</span>\n                          </li>\n                        ))}\n                      </ul>\n                      <Separator />\n                      <p className=\"text-muted-foreground px-4 py-2.5 text-xs\">Live values from your workspace.</p>\n                    </CardContent>\n                  </Card>\n                </div>\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureVerticalTabsPane.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/separator.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Vertical feature tabs where each trigger carries a title and one-line summary, swapping a wide preview pane built from primitives without changing the panel height.",
  "categories": [
    "marketing"
  ]
}