PageHeader

Composed page-intro block with shared badge, action, and status-row layout seams.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add page-header

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Button } from '@app/components/ui/button.tsx';
import { PageHeader } from '@app/components/ui/page-header.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><PageHeader><PageHeader.Main><PageHeader.Intro><h2>Orders</h2><p>Fulfillment across every channel.</p></PageHeader.Intro></PageHeader.Main><PageHeader.Actions><Button>Create order</Button></PageHeader.Actions></PageHeader></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`PageHeaderProps`	`children`	`Renderable`	Yes	Additional composed sections, preserved in source order.
`PageHeaderProps`	`class`	`string`	Yes	Optional class on the component root.
`PageHeaderProps`	`variant`	`PageHeaderVariant`	Yes	Header presentation marker; omitted slots remain empty.
`PageHeaderProps`	`title`	`Renderable`	Yes	Native h1 content; this replaces HTML's root title tooltip attribute.
`PageHeaderProps`	`eyebrow`	`Renderable`	Yes	Optional short category label before the heading.
`PageHeaderProps`	`description`	`Renderable`	Yes	Optional supporting text after the heading.
`PageHeaderProps`	`breadcrumb`	`Renderable`	Yes	Caller-owned Breadcrumb or native navigation content.
`PageHeaderProps`	`actions`	`Renderable`	Yes	Caller-owned links and buttons after the intro.
`PageHeaderProps`	`tabs`	`Renderable`	Yes	Caller-owned Tabs or navigation after the heading row.
`PageHeaderProps`	`status`	`Renderable`	Yes	Caller-owned status content after the heading row and tabs.
`PageHeaderSectionProps`	`children`	`Renderable`	No
`PageHeaderSectionProps`	`class`	`string`	Yes

TypeScript

type PageHeaderVariant = "default" | "with-tabs" | "with-status"
PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children" | "title">
PageHeaderSectionProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children">

Keyboard

Key	Action
`Tab/Shift+Tab`	Only native child controls receive focus in source order.

Tokens

Semantic contract roles: space/section/gap, space/stack/gap, text/fg, text/muted, type/title, type/eyebrow, type/body.

CSS custom properties referenced directly: --ns-fg, --ns-font-eyebrow, --ns-font-heading, --ns-font-mono, --ns-font-sans, --ns-label-size, --ns-label-tracking, --ns-leading-body, --ns-leading-caption, --ns-leading-label, --ns-leading-normal, --ns-leading-small, --ns-leading-tight, --ns-leading-title, --ns-muted-fg, --ns-page-padding-y, --ns-prose-measure, --ns-section-gap, --ns-space-2, --ns-space-3, --ns-space-4, --ns-space-6, --ns-text-4xl, --ns-text-base, --ns-text-body, --ns-text-caption, --ns-text-label, --ns-text-sm, --ns-text-small, --ns-text-title, --ns-tracking-body, --ns-tracking-caption, --ns-tracking-label, --ns-tracking-tight, --ns-tracking-title, --ns-weight-body, --ns-weight-caption, --ns-weight-title.

Contract and compatibility

Accessibility pattern: noninteractive presentation; native heading and child-owned controls

Native DOM attributes pass through; title is the native h1 content rather than a root tooltip attribute.
Phase-one metadata correction: Figma boolean content switches are optional Renderable slots; breakpoint is responsive CSS, not an accepted prop or emitted attribute.
The old namespace and children composition remain supported. Variants never synthesize tabs or status content; supplied slots render in any variant.
Status indicators and separators are child-owned content, not fabricated PageHeader parts.

Design contract values marked planned are not implementation props. The props above describe what ships today.