{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header-3",
  "title": "Header With Section Tabs",
  "description": "Settings page header with a title, description, primary action, and Overview, Members, and Billing tabs that switch the content below.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/blocks/page-header/3/page-header-block.tsx",
      "content": "import { Button } from \"@/components/ui/button\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function PageHeaderBlock() {\n  return (\n    <section className=\"min-h-svh w-full bg-background px-6 py-12 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between\">\n          <div className=\"flex flex-col gap-1.5\">\n            <h1 className=\"font-heading text-2xl font-bold tracking-tight sm:text-3xl\">\n              Settings\n            </h1>\n            <p className=\"text-sm text-muted-foreground\">\n              Manage your workspace preferences, members, and billing.\n            </p>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button>\n              <IconPlaceholder\n                lucide=\"Plus\"\n                tabler=\"IconPlus\"\n                hugeicons=\"Add01Icon\"\n                phosphor=\"Plus\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n                aria-hidden=\"true\"\n              />\n              New Webhook\n            </Button>\n          </div>\n        </div>\n\n        <Tabs defaultValue=\"overview\" className=\"mt-6 gap-6\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"members\">Members</TabsTrigger>\n            <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n          </TabsList>\n\n          <TabsContent value=\"overview\">\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              {Array.from({ length: 2 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"h-28 rounded-lg border border-border bg-muted/30\"\n                />\n              ))}\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"members\">\n            <div className=\"grid gap-4 sm:grid-cols-3\">\n              {Array.from({ length: 3 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"h-24 rounded-lg border border-border bg-muted/30\"\n                />\n              ))}\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"billing\">\n            <div className=\"grid gap-4\">\n              {Array.from({ length: 2 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"h-20 rounded-lg border border-border bg-muted/30\"\n                />\n              ))}\n            </div>\n          </TabsContent>\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/page-header-3.tsx"
    }
  ],
  "meta": {
    "height": "383px",
    "tier": "free"
  },
  "categories": [
    "page-header"
  ],
  "type": "registry:block"
}