Page Header
Page title header.
import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderTitle,} from "@/registry/new-york/items/manpowerhub-page-header/components/page-header";export function ManpowerhubPageHeaderBasic() { return ( <PageHeader className="p-4"> <PageHeaderContent> <PageHeaderTitle>Good morning, Junaid</PageHeaderTitle> <PageHeaderDescription> Sunday, 17 May 2026 · All systems operational </PageHeaderDescription> </PageHeaderContent> </PageHeader> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/page-header.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function PageHeader({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="page-header" className={cn("mb-4.5 flex items-start justify-between gap-4", className)} {...props} /> );}
function PageHeaderContent({ className, ...props}: React.ComponentProps<"div">) { return <div className={cn("min-w-0", className)} {...props} />;}
function PageHeaderTitle({ className, ...props }: React.ComponentProps<"h1">) { return ( <h1 data-slot="page-header-title" className={cn( "mb-0.5 text-lg font-extrabold tracking-[-0.3px] text-foreground", className, )} {...props} /> );}
function PageHeaderDescription({ className, ...props}: React.ComponentProps<"p">) { return ( <p data-slot="page-header-description" className={cn("text-[12.5px] text-[var(--text-3)]", className)} {...props} /> );}
function PageHeaderActions({ className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="page-header-actions" className={cn("flex shrink-0 items-center gap-2", className)} {...props} /> );}
export { PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, PageHeaderActions,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this page header:
npx shadcn@latest add @woxcn/manpowerhub-page-header