PageHeader creates a calm top hierarchy for dashboards, settings pages, and product detail screens. Its action area keeps selects and buttons compact and aligned, so page filters and commands can share a row without page-specific styling.

#Default usage

<PageHeader
  actions={<Button>New release</Button>}
  description="Review package health, pending changes, and release readiness."
  eyebrow="Workspace"
  title="Release overview"
/>

#Import

import { Button, PageHeader, PageHeaderActions } from "@froggdesign/enter-ui-react";

#Variants

#Marketing hero

Use variant="hero" for a responsive marketing introduction. Actions appear below its description, while visual places a product preview beside the copy. The component owns headline sizing, the preview surface, and the single-column layout at 900px and below. Without a visual, the hero uses one column.

<PageHeader
  variant="hero"
  eyebrow={<Badge variant="info">Customer workspace</Badge>}
  title="Your customer workspace, connected."
  description="Bring onboarding, requests, and updates into one shared workspace."
  actions={<Link href="/demo" variant="primary-button">Try the demo</Link>}
  visual={<Card><CardHeader><CardTitle>Workspace overview</CardTitle></CardHeader></Card>}
/>

#Accessibility

PageHeader renders a header and uses h1 for title. Use only one primary PageHeader per document view.

#API

• title, description, eyebrow, and actions define the standard slots.
• variant: default or hero.
• visual: optional preview alongside a hero.
• children render inside the content column.
• PageHeaderActions is available when actions need direct composition.
• Supports native header props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.