Page Header React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Page Header is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import PageHeader from @/components/ui/page-header.

import { Pencil, Plus, Trash2 } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { NavTabs } from "@/components/ui/nav-tabs"
import { PageHeader } from "@/components/ui/page-header"

export function ClientHeader() {
  return (
    <PageHeader
      breadcrumb={[
        { label: "Home", href: "/" },
        { label: "Clients", href: "/clients" },
        { label: "Tech Solutions LLC" },
      ]}
      avatar={{ name: "Tech Solutions LLC" }}
      title="Tech Solutions LLC"
      badges={<Badge tone="success" dot>Active</Badge>}
      description="IT equipment distributor in Austin · EIN 12-3456789"
      meta={[{ label: "Client since Mar 12, 2024" }, { label: "Balance $12,480.00" }]}
      actions={[
        { label: "Edit", icon: <Pencil /> },
        { label: "Delete", icon: <Trash2 />, tone: "danger" },
        { label: "New invoice", icon: <Plus />, primary: true, href: "/invoices/new" },
      ]}
      tabs={
        <NavTabs
          items={[
            { label: "Overview", href: "/clients/tech-solutions" },
            { label: "Invoices", href: "/clients/tech-solutions/invoices", badge: 12 },
          ]}
        />
      }
      sticky="condensed"
    />
  )
}

Props

• titledefault ""
  ReactNode

  The page title, rendered as the page's one <h1> (headingAs changes the element).

• headingAsdefault "h1"
  "h1" | "h2" | "h3" | "div"

  The title's element. Keep h1 for the page's own header; use h2, h3 or div when the header sits inside a page that already has its h1 (a dialog, a card, a docs preview).

• descriptiondefault ""
  ReactNode

  One or two lines under the title, capped at a readable width.

• breadcrumb
  BreadcrumbEntry[] | ReactNode

  Entries render a Breadcrumb (it folds the middle when long and becomes a ‹ Parent link on phones). A node renders as is.

• backHrefdefault ""
  string

  Adds a back button before the title (through NavLink). Below 640px it replaces the breadcrumb as a ‹ text link.

• onBack
  () => void

  Runs when the back button is pressed; without backHref the back button is a plain button.

• backLabeldefault "Back"
  string

  The back button's accessible name, and its visible text on phones ("Invoices" reads ‹ Invoices).

• icon
  ReactNode

  An icon in a tinted tile before the title (40px, 48px at lg), colored by tone or color.

• avatar
  { src?: string; name: string; radius?: AvatarRadius }

  A photo or initials before the title, wins over icon. radius md (default) for companies, full for people.

• badges
  ReactNode

  Status badges after the title; they wrap under it when space runs out.

• meta
  PageHeaderMeta[] | ReactNode

  Small facts in a wrapping row under the description: { id?, icon?, label }[], with 14px icons. A node renders as is.

• actions
  PageHeaderAction[] | ReactNode

  { id?, label, icon?, onSelect?, href?, variant?, tone?, primary?, disabled? }[]. The primary one (or the last solid) stays visible, last in the row; the others are outline buttons that fold into ⋯ from the end while they do not fit, and always in the compact layout (header narrower than 512px: phones, side panels). onSelect returning a promise shows the button loading. A node renders as is, without folding.

• tabs
  ReactNode

  NavTabs (or a Tabs list) sitting on the header's bottom border.

• children
  ReactNode

  Extra content between the title row and the tabs, such as filters or a progress bar.

• sizedefault "md"
  "sm" | "md" | "lg"

  Title 18 / 24 / 32px (18 / 22 / 26px on phones), with the icon tile and avatar scaled to match.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The media's color: the icon tile's soft tint, or the avatar's initials when there is no photo (neutral keeps the name-based color).

• colordefault ""
  string

  Any CSS color for the icon tile or the avatar initials; replaces the tone. Leave empty to use the tone.

• borderdefault true
  boolean

  The hairline under the header; tabs sit on it.

• loadingdefault false
  boolean

  Skeletons in the shape of the title, description, meta and actions; the breadcrumb and tabs stay.

• maxActionsdefault 0
  number

  The most buttons in the wide row, the primary included (1: only the primary, everything else in ⋯). The rest always open from the ⋯ menu, whatever fits. 0: as many as fit.

• mobileActionsdefault "menu"
  "menu" | "stack"

  The compact layout (the header narrower than 512px, so every phone): the primary stays as a small button and the rest open from ⋯ (a bottom action sheet on phones), or every action stacks full width (48px, primary on top).

• stickydefault "none"
  "none" | "condensed"

  condensed: once the header scrolls under the top bar, a 48px glass bar with the title and the primary action slides down and pins at top: var(--topbar-offset, 0px).

• moreLabeldefault "More actions"
  string

  The ⋯ button's accessible name and the phone action sheet's hidden title.

• cancelLabeldefault "Cancel"
  string

  The cancel row at the bottom of the phone action sheet.

• scrollTarget
  HTMLElement | Window | RefObject<HTMLElement | null> | null

  What scrolls, for the condensed bar. Default: the nearest ScrollContainerProvider, else the window.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for link actions, the back link and the breadcrumb. Default: the LinkProvider's.

• classNames
  Partial<Record<PageHeaderSlot, string>>

  Classes for the parts: breadcrumb, row, back, media, heading, title, badges, description, meta, metaItem, actions, more, tabs, condensed, condensedTitle, condensedAction.

FAQ

Used in

More React layout components