Page Header

Page Header is a screen's title line: the heading, a two-level breadcrumb, and a slot for the one action that belongs to the page rather than to a card inside it.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/page-header.tsx

Import from@viliha/vui-react/page-header

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

page-header-demo.tsx

import { PageHeader } from "@viliha/vui-react/page-header";

Exports

Everything this family exports. They are read from the source, so this list is what the package actually ships.

Prop	Type	Default
PageHeader	component	—

PageHeader props

Prop	Type	Default	What it does
title	string	—
action?	React.ReactNode	—	A control that belongs to the page rather than to a card inside it.
link?	React.ComponentType<{ href: string; className?: string; children: React.ReactNode; }>	—	The consumer's router link. Next's `Link` satisfies this as it stands.
homeHref?	string	"/"	Where the leading crumb points. `/` unless a consumer roots its app elsewhere.
homeLabel?	string	"Home"	What the leading crumb reads.

Customize

Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.