PageHeader

A consistent page title area with optional description, breadcrumb and actions.

Basic

Renders a page title as an <h1>.

Dashboard

<PageHeader title="Dashboard" />

With description

Add a description to provide supporting context below the title.

Team members

Manage access and roles for your workspace.

<PageHeader
title="Team members"
description="Manage access and roles for your workspace."
/>

With actions

Pass any React node to actions to render it right-aligned alongside the title.

Projects

All active projects in your workspace.

<PageHeader
title="Projects"
description="All active projects in your workspace."
actions={<Button variant="primary" size="sm">New project</Button>}
/>

With breadcrumb

Pass a Breadcrumb to the breadcrumb slot to render a navigation trail above the title.

Edit profile

<PageHeader
title="Edit profile"
breadcrumb={
  <Breadcrumb>
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
    <BreadcrumbItem active>Edit profile</BreadcrumbItem>
  </Breadcrumb>
}
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Page title rendered as `<h1>`
`description`	`string`	—	Supporting text rendered below the title
`actions`	`ReactNode`	—	Right-aligned slot for buttons or controls
`breadcrumb`	`ReactNode`	—	Renders above the title, typically a `Breadcrumb`
`className`	`string`	—	Additional Tailwind classes