PageHeader

PageHeader

<PageHeader
  breadcrumb={
    <Breadcrumbs>
      <Breadcrumb href="/">Home</Breadcrumb>
      <Breadcrumb>Dashboard</Breadcrumb>
    </Breadcrumbs>
  }
  title="Dashboard"
  description="What happened today across your team."
  actions={<>
    <Button variant="outline" tone="neutral">Export</Button>
    <Button>New report</Button>
  </>}
/>

Install: @helixui/core

import { PageHeader } from '@helixui/core'

status: stable · since: 0.2.0

Tags: title, breadcrumb, actions, page-top

Anatomy

Breadcrumb › path
Title                                    [ Action ] [ ⋮ ]
Description

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs content
• stackable — false
• fullBleed — false

Visual

A header block at the top of a page: optional breadcrumb above, large heading + description on the left, right-aligned actions.

Props

Name	Type	Default	Description
breadcrumb	ReactNode	—	Optional row above the title — typically <Breadcrumbs>.
title	ReactNode	—	Page heading. Rendered as <h1>.
description	ReactNode	—	Lead paragraph below the title.
actions	ReactNode	—	Right-aligned action group — primary buttons, IconButtons.
bordered	boolean	false	Adds a bottom border + spacing to separate from page content.

Tokens used

color.text.primary, color.text.secondary, color.border.default, font.family.sans, font.size.md, font.size.sm, font.size.2xl, font.weight.semibold, font.lineHeight.tight, space.1, space.2, space.3, space.4, space.6

Accessibility

Notes

• Renders <h1> so there’s exactly one per page. Use a different heading inside actions if needed.

Composes with

Component	Relation	Note
AppShell	child	Common first child of the AppShell main area.
Breadcrumb	slot	Goes in the breadcrumb slot.
Button	child	Right-aligned actions.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

page title with action

“page header for Users with a New user button”

<PageHeader
  title="Users"
  description="Manage who can access this workspace."
  actions={<Button>New user</Button>}
/>

Related

• Breadcrumb
• AppShell