Page Header

Ready

Title, meta, and actions atop a page.

Workout plans

Create, share, and track training programmes.

Installation

$ npx @oratiq-js/ui add page-header

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { PageHeader, PageHeaderTop, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, PageHeaderActions } from "@/components/ui/page-header";

Anatomy

PageHeader > PageHeaderTop > (PageHeaderContent + PageHeaderActions) — actions sit on the end edge and flip under RTL.
Renders a semantic <header> with an <h1> title — one per page.
Long titles truncate instead of wrapping the action row off-screen.

Composition, not configuration: slots are children, so a breadcrumb, a tab row, or a status badge drop in without new props.

View source on GitHub → components/ui/page-header.tsx