Layout

Page Header

Standard page title block with optional description, count, and action slots.

Preview

import { Button } from '@brika/clay/components/button';
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderDescription,
  PageHeaderInfo,
  PageHeaderTitle,
} from '@brika/clay/components/page-header';
import { Plus } from 'lucide-react';

/** Standard page header with title, description, and a primary action. */
export default function PageHeaderDefaultDemo() {
  return (
    <PageHeader className="w-full max-w-2xl">
      <PageHeaderInfo>
        <PageHeaderTitle>Dashboards</PageHeaderTitle>
        <PageHeaderDescription>Monitor your key metrics in one place.</PageHeaderDescription>
      </PageHeaderInfo>
      <PageHeaderActions>
        <Button>
          <Plus />
          New dashboard
        </Button>
      </PageHeaderActions>
    </PageHeader>
  );
}

01 Installation

Install

Pull Page Header from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { PageHeader } from "@brika/clay";

tsxGranular1 line

import { PageHeader } from "@brika/clay/components/page-header";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxPage Header.tsx27 lines

import { Button } from '@brika/clay/components/button';
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderDescription,
  PageHeaderInfo,
  PageHeaderTitle,
} from '@brika/clay/components/page-header';
import { Plus } from 'lucide-react';

/** Standard page header with title, description, and a primary action. */
export default function PageHeaderDefaultDemo() {
  return (
    <PageHeader className="w-full max-w-2xl">
      <PageHeaderInfo>
        <PageHeaderTitle>Dashboards</PageHeaderTitle>
        <PageHeaderDescription>Monitor your key metrics in one place.</PageHeaderDescription>
      </PageHeaderInfo>
      <PageHeaderActions>
        <Button>
          <Plus />
          New dashboard
        </Button>
      </PageHeaderActions>
    </PageHeader>
  );
}

03 Examples

Page Header, every way

Pair the page header with a Breadcrumb above it to show hierarchical location.

GitHub

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@brika/clay/components/breadcrumb';
import { Button } from '@brika/clay/components/button';
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderDescription,
  PageHeaderInfo,
  PageHeaderTitle,
} from '@brika/clay/components/page-header';
/** Pair the page header with a Breadcrumb above it to show hierarchical location. */
export default function PageHeaderBreadcrumbDemo() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Settings</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Integrations</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>GitHub</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <PageHeader>
        <PageHeaderInfo>
          <PageHeaderTitle>GitHub Integration</PageHeaderTitle>
          <PageHeaderDescription>
            Connect repositories and configure webhook events.
          </PageHeaderDescription>
        </PageHeaderInfo>
        <PageHeaderActions>
          <Button variant="outline">Disconnect</Button>
          <Button>Save changes</Button>
        </PageHeaderActions>
      </PageHeader>
    </div>
  );
}

With Count

PageHeaderCount adds a muted count next to the description, useful for record totals.

GitHub

import { Button } from '@brika/clay/components/button';
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderCount,
  PageHeaderDescription,
  PageHeaderInfo,
  PageHeaderTitle,
} from '@brika/clay/components/page-header';
/** PageHeaderCount adds a muted count next to the description, useful for record totals. */
export default function PageHeaderWithCountDemo() {
  return (
    <PageHeader className="w-full max-w-2xl">
      <PageHeaderInfo>
        <PageHeaderTitle>Pipelines</PageHeaderTitle>
        <PageHeaderDescription>
          Active CI/CD workflows
          <PageHeaderCount value={12} />
        </PageHeaderDescription>
      </PageHeaderInfo>
      <PageHeaderActions>
        <Button variant="outline">Pause all</Button>
        <Button>New pipeline</Button>
      </PageHeaderActions>
    </PageHeader>
  );
}

04 Accessibility

Accessibility

PageHeaderTitle renders as <h1> by default, ensure only one <h1> per page.
Action buttons should be descriptive: "New dashboard" not just "New".
When used with a Breadcrumb, the breadcrumb provides location context the heading cannot.

05 Tokens 1 theme-overridable

Theme tokens

Every CSS variable Page Header reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Page Header without touching component code.

Page Header tokens

1 token

ColorFill, border, and text colors.1

--page-header-description-colorcolorvar(--muted-foreground)
components.pageHeader.descriptionColor
Foreground color of `<PageHeaderDescription>` (and the inline `<PageHeaderCount>` chip). Defaults to the muted role so the description reads as secondary against the title.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.pageHeader, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "pageHeader": {
      "descriptionColor": "var(--muted-foreground)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-page-header-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Page Header. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.