Docs/PageHeader

PageHeader

Page-level header with title, description, badge, and action buttons.

Usage

tsx

1import { PageHeader, Button, Badge } from '@storm-ds/ui'
2
3<PageHeader
4  title="Dashboard"
5  description="Overview of your projects."
6  badge={<Badge variant="secondary">Pro</Badge>}
7  actions={<Button size="sm">New Project</Button>}
8/>

Basic

Settings

Manage your account preferences.

tsx

1<PageHeader title="Settings" description="Manage your account." />

With Actions

Projects

All your active projects.

tsx

1<PageHeader
2  title="Projects"
3  description="All your active projects."
4  actions={
5    <>
6      <Button variant="outline" size="sm">Export</Button>
7      <Button size="sm">New Project</Button>
8    </>
9  }
10/>

With Badge

Beta

Dashboard

Overview of your activity.

tsx

1<PageHeader
2  title="Dashboard"
3  description="Overview of your activity."
4  badge={<Badge variant="secondary">Beta</Badge>}
5/>

Props

Prop	Type	Default	Description
title	string	-	Page title (required)
description	string	-	Subtitle text below title
badge	React.ReactNode	-	Badge above the title
actions	React.ReactNode	-	Action buttons on the right
className	string	-	Custom classes

Use with AI

Create a page header using Storm UI's PageHeader. Import: `import { PageHeader, Button, Badge } from '@storm-ds/ui'`. Props: title (required string), description (optional), badge (element above title), actions (right-side buttons). Example: `<PageHeader title="Dashboard" description="Overview" actions={<Button size="sm">New</Button>} />`

ListItem

Item