PageHeader

A responsive page-level header that displays a title, subtitle, and optional action slot. Adapts from stacked (mobile) to side-by-side (desktop) layout automatically.

Basic Usage

Demo

Users

Manage your team members and their access levels.

<PageHeader
  title="Users"
  subtitle="Manage your team members and their access levels."
/>

With Actions

With Actions

Patients

237 active patients

<PageHeader title="Patients" subtitle="237 active patients">
  <template #actions>
    <button class="btn-primary">Add Patient</button>
    <button class="btn-secondary">Export</button>
  </template>
</PageHeader>

Props

Props

Prop	Type	Default	Description
title	string	undefined	Main heading text. Also overridable via the title slot.
subtitle	string	undefined	Subheading text displayed below the title. Also overridable via the subtitle slot.
containerClass	string	'bg-primary border-border-light shadow-xs text-slate-900 dark:text-white'	CSS classes applied to the outer container div for custom styling.

Slots

Slots

Slot	Description
title	Override the title rendering. Replaces the title prop text.
subtitle	Override the subtitle rendering. Replaces the subtitle prop text.
actions	Right-side content. Use for buttons, filters, or search inputs. Only rendered if this slot has content.