PageHeader

The PageHeader component gives admin and backoffice screens a consistent top structure for page title, operational context, and primary actions.

Import

import {
  PageHeader,
  PageHeaderActions,
  PageHeaderDescription,
  PageHeaderMeta,
  PageHeaderTitle,
} from '@nim-ui/components';

Basic Usage

Backoffice Page Header

View Code

<PageHeader>
  <div className="space-y-2">
    <PageHeaderMeta>Updated 2 minutes ago</PageHeaderMeta>
    <PageHeaderTitle>Orders</PageHeaderTitle>
    <PageHeaderDescription>
      Review exceptions, fulfillment status, and risk signals before the next warehouse handoff.
    </PageHeaderDescription>
  </div>
  <PageHeaderActions aria-label="Order actions">
    <Button variant="outline" size="sm">Export</Button>
    <Button variant="primary" size="sm">Create order</Button>
  </PageHeaderActions>
</PageHeader>

Props

PageHeader

Name	Type	Default	Description
className	string	-	Additional classes for the header container.
children *	ReactNode	-	Header content, usually title block and PageHeaderActions.

PageHeaderActions

Name	Type	Default	Description
aria-label	string	-	Accessible label for the grouped actions.
children *	ReactNode	-	Action buttons or controls for the page.

Backoffice Guidance

• Keep one primary action in PageHeaderActions.
• Put freshness, ownership, or operational scope in PageHeaderMeta.
• Use the description for decision context, not marketing copy.