# Page Header (`page-header`) - SignalOS widget

> Composable page header with title, description, and left/right action slots.

- **Version:** 0.2.2
- **Kind:** widget · **Category:** data-display
- **Install:** `npx shadcn@latest add @signalos/page-header`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/button
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/widgets/page-header/PageHeader.tsx`, `src/components/widgets/page-header/PageHeader.constants.ts`, `src/components/widgets/page-header/PageHeader.types.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderLeft, PageHeaderRight, PageHeaderTitle, PageHeaderTop } from "@/components/widgets/page-header/PageHeader"
```

## Example

```tsx
// Example: page header with a breadcrumb, description, and actions.
import { Plus } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  PageHeader,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderLeft,
  PageHeaderRight,
  PageHeaderTitle,
  PageHeaderTop,
} from "@/components/widgets/page-header/PageHeader"

export default function Example() {
  return (
    <PageHeader>
      <PageHeaderTop>
        <span className="text-sm text-text-secondary">
          Settings / Team / Members
        </span>
      </PageHeaderTop>
      <PageHeaderContent>
        <PageHeaderLeft>
          <PageHeaderTitle>Members</PageHeaderTitle>
          <PageHeaderDescription>
            Invite teammates and manage their access.
          </PageHeaderDescription>
        </PageHeaderLeft>
        <PageHeaderRight>
          <Button variant="outline">Export</Button>
          <Button>
            <Plus />
            Invite member
          </Button>
        </PageHeaderRight>
      </PageHeaderContent>
    </PageHeader>
  )
}
```

## Props

### `PageHeaderProps`

```ts
export type PageHeaderProps = React.HTMLAttributes<HTMLDivElement>
```

### `PageHeaderContentProps`

```ts
export type PageHeaderContentProps = React.HTMLAttributes<HTMLDivElement>
```

### `PageHeaderLeftProps`

```ts
export type PageHeaderLeftProps = React.HTMLAttributes<HTMLDivElement>
```

### `PageHeaderTitleProps`

```ts
export type PageHeaderTitleProps = React.HTMLAttributes<HTMLHeadingElement>
```

### `PageHeaderDescriptionProps`

```ts
export type PageHeaderDescriptionProps =
  React.HTMLAttributes<HTMLParagraphElement>
```

### `PageHeaderTopProps`

```ts
export type PageHeaderTopProps = React.HTMLAttributes<HTMLDivElement>
```

### `PageHeaderRightProps`

```ts
export type PageHeaderRightProps = React.HTMLAttributes<HTMLDivElement>
```

## Changelog

# page-header

## 0.2.2

- Removed the unused `@signalos/tooltip` `registryDependencies` entry - no
  file in this item imports or renders a Tooltip, so consumers were vendoring
  an entire unrelated primitive for nothing.

## 0.2.1

- Fixed `PageHeaderDescription` using the raw `text-navy-400` scale value
  instead of the semantic `text-text-muted` token. `--color-navy-400`
  happened to equal dark mode's `--text-muted`, so the description rendered
  in the dark-theme gray-blue tone even in light mode, and no client theme
  override could reach it.

## 0.2.0

- Title default is now `text-3xl font-bold` (was `text-xl font-semibold`).
  Every known consumer overrode the title to this scale, so the design intent
  moves into the widget default. Override via `className` to opt out.

## 0.1.2

- Content sync fix to bring source in line with published registry payload.


## 0.1.1

- Initial release: composable page header primitives
  (`PageHeader`, `PageHeaderTop`, `PageHeaderContent`, `PageHeaderLeft`,
  `PageHeaderRight`, `PageHeaderTitle`, `PageHeaderDescription`).