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. |
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.
Kbd
Tiny primitive for rendering keyboard shortcuts using the semantic <kbd> element. Supports a single key via children or a multi-key sequence via the keys prop with a customizable separator. Built with CSS Modules — 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.