Page Header

A consistent top-of-page structure: breadcrumb trail, title, optional description, and a right-aligned actions slot.

Team Members

Manage your team and their account permissions.

import { PageHeader } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add page-header

Import

import.tsx

import { PageHeader } from "@aetherstack/patterns"

Usage

page-header.tsx

// Basic
<PageHeader
  title="Team Members"
  description="Manage your team and their account permissions."
/>

// With breadcrumb and actions
<PageHeader
  title="Team Members"
  description="Manage your team and their account permissions."
  breadcrumb={[
    { label: "Settings", href: "/settings" },
    { label: "Team" },
  ]}
  actions={
    <Button>
      <Plus />
      Invite member
    </Button>
  }
/>

Props

Prop	Type	Default	Description
title*	string	—	Page title rendered as an h1.
description	string	—	Optional subtitle below the title.
breadcrumb	BreadcrumbItem[]	—	Crumb trail rendered above the title.
actions	ReactNode	—	Right-aligned slot for primary actions.
className	string	—	Additional classes on the wrapper div.

* Required

Accessibility

→Title renders as <h1> — ensure only one PageHeader exists per page.
→Breadcrumb uses a <nav aria-label="Breadcrumb"> with an ordered list.
→The current page crumb has aria-current="page" applied automatically.