Component

Page Header

The heading cluster at the top of an application page: an optional kicker above an app-sized title, an optional description, and a trailing row of actions. For centred marketing headings use Section Head.

Basic

A title with a kicker and a description.

Workspace

Projects

Everything your team is working on, newest first.

With actions

Actions sit on the trailing edge and wrap under the title on narrow screens.

Settings

Members

Invite people and choose what they can change.

Heading level

Use the as prop to render the title as an h2 or h3 inside a nested view.

Notifications

Choose which emails you receive.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { PageHeader, Button } from '@refraction-ui/react'

export function ProjectsPage() {
  return (
    <PageHeader
      kicker="Workspace"
      title="Projects"
      description="Everything your team is working on."
      actions={<Button>New project</Button>}
    />
  )
}

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`	--	The page title (required).
`kicker`	`React.ReactNode`	--	Optional eyebrow above the title.
`description`	`React.ReactNode`	--	Optional supporting copy under the title.
`actions`	`React.ReactNode`	--	Optional actions (buttons, menus) on the trailing edge.
`as`	`'h1' \| 'h2' \| 'h3'`	`'h1'`	Heading element for the title.
`className`	`string`	--	Merged onto the root <header>.