/
Foundations
Components
Blocks
Pages
Screens
Library
Playground
Grab Pro Now
Customize your admin
One band per page — icon, title, actions, toolbar and tabs — parked under the app header while the page scrolls.
Every slot below is optional except title, and each one claims its own row. Scroll this page to watch the band above stay put: sticky defaults to true and offsets itself by --app-header-height, which the shell measures from the app header.
Billing documents issued to customers this quarter.
Positions held across all accounts.
Long-term wealth building and the shape of life after work.
interface PageHeaderProps {
eyebrow?: ReactNode // above the title row — breadcrumb / kicker
icon?: ReactNode // leading tile, via <PageHeaderIcon>
title: ReactNode // required; title={null} for a chrome-only band
titleSuffix?: ReactNode // pinned to the title — badge / status / dropdown
description?: ReactNode // supporting copy under the title
actions?: ReactNode // right end of the title row
toolbar?: ReactNode // own row — filters / context controls
inlineToolbar?: boolean // lift the toolbar onto the title row
tabs?: ReactNode // own row, flush with the band's bottom border
children?: ReactNode // escape hatch below the named rows
sticky?: boolean // pin under the app header (default true)
className?: string // band overrides — background / border / top
innerClassName?: string // centered container overrides — padding
}