PageHeader

A page-level header with a title, optional description, and an optional actions slot. Aligns the title block and actions with justify-between for a clean page-top layout.

Anatomy

A flex row with justify-between. The left side holds the title (h1) and optional description. The right side holds the actions slot — any React node.

Dashboard

Welcome back! Here's an overview of your metrics.

Variants

Title only

Settings

Title + description

Projects

Manage your active projects and deployments.

Title + single action

Team Members

Full (title + description + actions)

Analytics

Track performance across all channels.

Beta

Design Guidelines

Do

  • Use once per page. A single PageHeader at the top of each view establishes context immediately.
  • Keep the title short and direct. One to three words — the title names the page, not describes it.
  • Limit actions to 1–3 buttons. More than three primary actions in the header overwhelm the user.

Don't

  • Don't use multiple PageHeaders per page. Section-level headings should use smaller heading tags, not PageHeader.
  • Don't put navigation inside the actions slot. Breadcrumbs and back buttons belong above the header, not in its actions.
  • Don't write a paragraph as the description. One short sentence; detailed information belongs in the page body.

Developer Reference

Props

  • title (required) — rendered as an <h1> with text-2xl font-bold tracking-tight.
  • description (optional) — rendered as a <p> with text-sm text-muted-foreground below the title.
  • actions (optional) — any React.ReactNode rendered in a shrink-0 flex container on the right.
  • className — applied to the outer flex container.

Usage

import { OriginUiPageHeader } from "@/components/branding/origin-ui-page-header"

// Title only
<OriginUiPageHeader title="Settings" />

// With description
<OriginUiPageHeader
  title="Projects"
  description="Manage your active projects and deployments."
/>

// Full — title, description, and actions
<OriginUiPageHeader
  title="Dashboard"
  description="Welcome back! Here's an overview of your metrics."
  actions={
    <div className="flex gap-2">
      <Button variant="outline">Export</Button>
      <Button>Add Widget</Button>
    </div>
  }
/>