Page Header
Admin page header compound with eyebrow, title, description, breadcrumb, and actions slots. Built with CSS Modules and container queries — copy it into your project and own it completely.
Basic
Customers
With Description
Customers
Manage customer accounts, billing, and access.
With Eyebrow
Customers
Manage customer accounts, billing, and access.
With Actions
Customers
Manage customer accounts, billing, and access.
Sizes
Small
Compact vertical rhythm.
Medium
Default vertical rhythm.
Large
Spacious vertical rhythm.
Installation
npx visor add page-headerThis copies two files into your project:
components/ui/page-header/page-header.tsx— the componentcomponents/ui/page-header/page-header.module.css— the styles
Usage
import { PageHeader } from '@/components/ui/page-header/page-header';
import { Button } from '@/components/ui/button/button';
export default function Example() {
return (
<PageHeader
eyebrow="Blacklight Admin"
title="Customers"
description="Manage customer accounts, billing, and access."
actions={<Button>New customer</Button>}
/>
);
}API Reference
PageHeaderProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | — | Page heading content. Rendered in the element given by titleAs. |
eyebrow | React.ReactNode | — | Small uppercase label rendered above the title. |
description | React.ReactNode | — | Supporting copy rendered below the title. |
breadcrumb | React.ReactNode | — | ReactNode rendered above the title row, typically a Breadcrumb component. |
actions | React.ReactNode | — | ReactNode rendered on the right side of the title row, typically a cluster of buttons. |
as | 'header' | 'section' | 'div' | 'header' | Root element tag. |
titleAs | 'h1' | 'h2' | 'h3' | 'h1' | Heading element used for the title. |
size | 'sm' | 'md' | 'lg' | 'md' | Controls vertical rhythm and title size. |
titleSize | 'default' | 'marquee' | string | — | Title font-size override, orthogonal to size. The "marquee" token renders at the --page-header-title-size custom property (defaulting to 3.5rem); any other string is forwarded as a raw CSS length and rendered with the marquee rule. |
titleFamily | 'heading' | 'display' | string | — | Title font-family override. "display" resolves to var(--font-display, var(--font-family-heading, inherit)) so themes without a display font degrade gracefully; any other string is forwarded as a raw CSS family. |
leading | string | number | — | Title line-height override, forwarded as an inline --page-header-title-leading custom property (a unitless number like 1.05 or any CSS length). Omit to keep the default line-height. |
className | string | — | Additional CSS class names to merge onto the root element. |
...props | React.HTMLAttributes<HTMLElement> | — | All standard HTML attributes are forwarded to the root. |
The component also accepts all standard HTML attributes for the root element (defaults to <header>).
Source Files
After running npx visor add page-header, you'll have:
page-header.tsx
A forwardRef component using CVA for size variants and CSS Modules for layout. The root element is configurable via the as prop and the heading level via titleAs.
page-header.module.css
All styles use CSS custom properties from @loworbitstudio/visor-core, so the page header automatically adapts to your active theme. Responsive collapse (actions stack under the title on narrow containers) is driven by container queries — the wrapper uses container-type: inline-size, so the component adapts to its parent container's width rather than the viewport.
Customization
After copying the component, you own it completely. Common customizations:
- Add a
metaslot for timestamps, owner avatars, or status badges. - Replace the default semantic
<header>root with a custom sticky wrapper. - Extend
sizevariants to include a compact inline variant for embedded contexts.
Matrix Table
A fixed assignment grid for members×roles patterns. Sticky-left identity column, centered boolean cells, and multi-line column headers. No list machinery — copy it into your project and own it completely.
Score Indicator
Compact circular ring visualization for percentage or ratio metrics — health score, uptime, engagement, capacity. Auto-toned color mapping derived from the value/max ratio.