PageHeader

The bar across the top of a page: its title as the page's one heading, and whatever acts on the whole page at the end. It stays at the top on white while the content scrolls by, which fades out under it — no hairline.

Title

Just the page's name. It's the page's h1, on one line: a title too long for the bar is cut short with an ellipsis, never wrapped.

Set up your studio

With actions

Buttons that act on the whole page go at the end — on setup, the Preview that opens the booking page on a phone. Keep them few and small; the page's own work stays in the page.

Set up your studio

API reference

PropTypeDefaultDescription
titleReactNode—The page's name, rendered as its h1. One line; a longer one is cut short.
actionsReactNode—Buttons for the whole page, at the end of the bar. Left out, the bar is the title alone.
classNamestring—Layout only — padding to line up with the page below.

Guidelines

  • One per page, at the very top: the title is the page's only h1.
  • It sticks while the page scrolls, so keep it to a title and a few page-wide actions — never a form or a filter row.
  • Match its inline padding to the content below it (px-6 by default), so the title lines up with the page's left edge.