LAYOUT

PageHeader

Top-of-page strip with eyebrow + display title + description + right-aligned actions slot. Renders a real <header> landmark with a bottom hairline border.

Import

import { PageHeader } from 'damo-ui'

Live preview

WORKSPACE

Damacchi UI

Memphis-inspired component library, ready to ship.

1<PageHeader
2  eyebrow="WORKSPACE"
3  title="Damacchi UI"
4  description="Memphis-inspired component library, ready to ship."
5  actions={<Button variant="primary">Invite</Button>}
6/>

Props

PageHeader props
PropTypeDefaultDescription
eyebrowReactNode—Optional small uppercase label rendered above the title.
title*ReactNode—Page heading rendered as an <h1> in the display font.
descriptionReactNode—Optional paragraph below the title.
actionsReactNode—Optional right-aligned slot for primary actions (Buttons, IconButtons, …).

Accessibility

  • The wrapper is a real <header> — adds a banner landmark when used at the page level.
  • The title renders as <h1>; only one PageHeader per route.
← AppTopBarSidebar →