PageHeader

A view's title, description and actions, with a responsive layout.

Projects

Manage and organize your work.

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add page-header

What add page-header installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Manage and organize your work.

Title, description and actions that adapt to the width.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`PageHeader` Responsive row of content and actions.	`div`	—
`PageHeaderContent` Groups title and description.	`div`	—
`PageHeaderHeading` Page title.	`h1`	—
`PageHeaderDescription` Supporting description.	`p`	—
`PageHeaderActions` Right-aligned actions.	`div`	—

Use PageHeaderHeading as the view's h1; keep a single level-1 heading per page.

On narrow screens the actions stack below the title without changing reading order.