Shell

PageHeader

Page-level header with display-font title, optional eyebrow + description, and an actions slot on the right.

Examples

With actions

Library

Recently Added

Books imported in the last 7 days.

<PageHeader
  eyebrow="Library"
  title="Recently Added"
  description="Books imported in the last 7 days."
>
  {#snippet actions()}
    <Button variant="outline">Filter</Button>
    <Button>Import</Button>
  {/snippet}
</PageHeader>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Display-font title (responsive size).
`eyebrow`	`string`	`—`	Tracked uppercase label above the title.
`description`	`string`	`—`	Muted paragraph below the title.
`sticky`	`boolean`	`false`	Stick to the top of the scroll viewport with a frosted backdrop.
`actions`	`Snippet`	`—`	Right-side action slot (typically Buttons).

Install

CLI

npx @a3tai/mittsu add page-header