{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "page-header",
  "type": "registry:ui",
  "title": "Page Header",
  "description": "The page title block with one H1, a description, and actions.",
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Application"
  ],
  "docs": "https://abackui.com/docs/components/page-header",
  "meta": {
    "status": "stable",
    "usedIn": [
      "aback-tools",
      "aback-launch"
    ]
  },
  "files": [
    {
      "path": "components/ui/page-header.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface PageHeaderProps extends Omit<React.ComponentProps<\"header\">, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  /**\n   * Heading element for the title. Defaults to `h1`, which is the correct\n   * choice for a page. Pass `h2` or `h3` only when the header introduces a\n   * section below an existing page heading, such as a documentation preview.\n   */\n  as?: \"h1\" | \"h2\" | \"h3\";\n}\n\n/**\n * The page title block. It renders the page's single <h1> by default.\n * Breadcrumbs belong directly below this block, not inside it.\n */\nfunction PageHeader({\n  title,\n  description,\n  eyebrow,\n  actions,\n  as: Heading = \"h1\",\n  className,\n  ...props\n}: PageHeaderProps) {\n  return (\n    <header\n      data-slot=\"page-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {eyebrow ? (\n        <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n          {eyebrow}\n        </p>\n      ) : null}\n      <Heading className=\"text-3xl font-bold leading-tight tracking-tight text-foreground text-balance\">\n        {title}\n      </Heading>\n      {description ? (\n        <p className=\"max-w-3xl text-base leading-relaxed text-muted-foreground\">\n          {description}\n        </p>\n      ) : null}\n      {actions ? <div className=\"mt-2 flex flex-wrap items-center gap-2\">{actions}</div> : null}\n    </header>\n  );\n}\n\nexport { PageHeader };\n",
      "type": "registry:ui",
      "target": "components/ui/page-header.tsx"
    }
  ]
}