PageHeader

v1.0.0

Page title, description, and actions header used by scaffolded admin pages.

Import

import { PageHeader } from '@meteorack/sdk-react';

How To Use It

Render it once near the top of a module page to establish the current view, supporting copy, and page-level actions.
Pass primary actions through the actions prop so controls stay visually tied to the page title.

Works Well With

AppShell Button Badge

Props

title: string

Main heading for the page.

description?: string

Optional supporting text under the title.

actions?: ReactNode

Optional actions area aligned to the right side of the header.

className?: string

Optional class name for the header wrapper.

Example

PageHeader.tsx

import { PageHeader, Card, Button } from '@meteorack/sdk-react';

export function MainPage() {
  return (
    <>
      <PageHeader
        title="My Module"
        description="Module overview and controls"
        actions={<Button variant="primary">Save</Button>}
      />
      <Card>
        <Button variant="primary">Run action</Button>
      </Card>
    </>
  );
}

PreviousAppShell NextButton