Page Header

The masthead a page opens with: eyebrow, title, lead and a meta row. Extracted after four pages in this catalogue had each grown their own copy and drifted apart.

src/components/ui/page-header.tsx

About

From the component's own source, where it was written.

The masthead every page in the catalogue opens with.

Extracted because four pages had each grown their own copy of the same markup, and they had already drifted — different bottom padding, different measure on the lead paragraph. One header keeps the rhythm identical as you move between a doc, a component and an index.

eyebrow is the line above the title: a breadcrumb on a component page, the source path, a section label. meta sits under the lead for counts, badges or links.

Install

npx astralyx-ui add page-header

Usage

import { PageHeader } from '@/components/ui/page-header'

<PageHeader
  eyebrow={<Breadcrumb>…</Breadcrumb>}
  title="Components"
  description="Every primitive in the kit."
  meta={<Badge size="sm">142 components</Badge>}
/>

Composer

Change the props and the source below follows.

Components

Every primitive in the kit, written from scratch — no headless dependency, one token set for both themes.

142 components
Props
tsx
<PageHeader
  title="Components"
  description="…"
  meta={<Badge size="sm">142 components</Badge>}
/>

Examples

Header

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

PageHeader

The masthead every page in the catalogue opens with.

PropTypeDefaultDescription
eyebrowReactNode—The line above the title — a breadcrumb, a source path, a section label.
titlestringrequiredRendered as the page h1, balanced across lines.
descriptionReactNode—Lead paragraph, and a row beneath it for counts, badges or links.
metaReactNode—Lead paragraph, and a row beneath it for counts, badges or links.
classNamestring——