ComponentsPage layouts

Page header

The title block of a page: breadcrumb or eyebrow, the page's one h1 in the display font, description, status meta, actions and sub-tabs. Server-compatible; the automatic breadcrumb reads the App shell's active trail.

components/page-header.tsxtheme · material · accent · density · font

Content

Posts

128 posts · 6 scheduled for this week. Drafts older than 90 days are archived automatically.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { PageHeader, Button } from "@vamos-ui/react";

<PageHeader
  eyebrow="Content"
  title="Posts"
  description="128 posts · 6 scheduled"
  actions={<Button variant="primary">New post</Button>}
/>

Examples

Record page

back links up a level; meta sits next to the title; menu puts secondary actions in a “⋯” dropdown.

Contacts

Hannah Lindqvist

CustomerNorthwind TradersUpdated 2h ago

With sub-tabs

tabs attaches route tabs to the header's bottom edge.

People

Payroll · November 2026

42 employees · due Nov 28

Sizes

lg 40px for dashboards, md 30px for lists, sm 22px for records — scaled by the font preset. <em> follows the preset (italic in serif headings).

Monday, November 10

Good morning, Ada.

What happened on your site in the last 30 days.

Contacts

2,418 people · 312 added this month

Leave request #1042

Pending approval

Loading

loading keeps the h1 in place with a skeleton line.

Companies

Loading company…

API

PageHeader

Prop	Type	Default
`title` The page's one <h1>.	`ReactNode`	`—`
`eyebrow` Small line above the title. Not uppercased with CSS (Turkish i/İ).	`ReactNode`	`—`
`breadcrumb` "auto": built from the App shell trail.	`ReactNode \| "auto"`	`—`
`back` “← Contacts” link above the title.	`{ href: string; label: string }`	`—`
`description` One or two lines under the title.	`ReactNode`	`—`
`meta` Badges, “Updated 2h ago” — next to the title.	`ReactNode`	`—`
`actions` Buttons; wrap under the title on narrow screens.	`ReactNode`	`—`
`menu` Secondary actions in a “⋯” menu.	`MenuEntry[]`	`—`
`tabs` Sub-navigation on the bottom edge.	`ReactNode`	`—`
`size` 22 / 30 / 40 px × --display-scale.	`"sm" \| "md" \| "lg"`	`"md"`
`align` Centered for empty pages and onboarding.	`"start" \| "center"`	`"start"`
`sticky` Sticks under the top bar on the bar surface.	`boolean`	`false`
`loading` Skeleton in the h1 (aria-busy).	`boolean`	`false`

PageHeaderTitle · PageHeaderEyebrow · PageHeaderDescription · PageHeaderActions · PageHeaderTabs

Prop	Type	Default
`size` PageHeaderTitle only.	`"sm" \| "md" \| "lg"`	`—`
`className` Parts for custom layouts.	`string`	`—`

Notification center

Page intro