{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header",
  "title": "Page header",
  "description": "title, description and actions · one per page, first in the content",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/page-header.tsx",
      "content": "import { cn } from 'cn';\nimport type * as React from 'react';\n\ntype Props = {\n  title: string;\n  description?: React.ReactNode;\n  /** Buttons on the right (wraps under the title on small screens). One primary action at most. */\n  actions?: React.ReactNode;\n  /** Small line above the title: a breadcrumb or a section name. */\n  eyebrow?: React.ReactNode;\n  className?: string;\n};\n\n/** The page title block: one per page, first in the content. */\nexport function PageHeader({ title, description, actions, eyebrow, className }: Props) {\n  return (\n    <header className={cn('flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between', className)}>\n      <div className=\"flex min-w-0 flex-col gap-1.5\">\n        {eyebrow ? <div className=\"text-muted-foreground text-sm\">{eyebrow}</div> : null}\n        <h1 className=\"text-2xl font-semibold tracking-tight sm:text-3xl\">{title}</h1>\n        {description ? <p className=\"text-muted-foreground max-w-2xl\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex shrink-0 flex-wrap gap-2\">{actions}</div> : null}\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/page-header.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PageHeader"
    ],
    "api": "<PageHeader eyebrow? title description? actions? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}