Component reference

PageHeader

The title block at the top of a full page: a name, one line of purpose, page-level actions.

Preview

Page header, cards and grouped rows

Shows each public component's props and slots separately; does not assemble an application page.

packages/meowtail/stories/page-structure.stories.tsxline 24tsx

render: () => (
  <Stack>
    <PageHeader
      title="Example page header"
      description="Component description slot"
      leading={<Icon name="folder" />}
      actions={<Button size="small">Action</Button>}
    />
    <ResourceCard
      title="Example resource"
      subtitle="Resource category"
      description="The caller provides the description."
      icon={<Icon name="folder" />}
    />
    <ResourceCard
      title="Disabled resource"
      tone="muted"
      description="Component example in the disabled state."
    />
    <ListRow
      tone="accent"
      title="Summary row"
      tags={<Tag tone="accent">Selected</Tag>}
      description="Standalone item"
    />
    <ListGroup>
      <ListRow title="First item" description="The caller provides the content" />
      <ListRow title="Expanded item" expanded>
        <p>Expanded content slot</p>
      </ListRow>
    </ListGroup>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { PageHeader } from "meowtail";

<PageHeader
  title="Example page header"
  description="Component description slot"
  leading={<Icon name="folder" />}
  actions={<Button size="small">Action</Button>}
/>

API reference

Props

Prop	Type	Default
`title`Required	`Child`	–
`description`	`Child`	–
`titleId`	`string`	–
`leading`A mark before the title, such as an icon. Presence is fixed for the mount: omitting it, or passing `null` or `false`, keeps the title as a direct child of the copy block.	`Child`	–
`actions`Switches and buttons that act on the whole page.	`Child`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootcopyheadingleadingtitledescriptionactions

Registry

The component is registered as page-header in the meowtail component registry.