Powerful and customizable React page header components built for modern applications and websites. These page headers are built using React Aria and styled with Tailwind CSS.
Installation
These page header components do not require any installation, just copy and paste into your project once you've set up Untitled UI. Check out our installation guide to get started.
Page header examples
Below are examples and variations of this page header component:
FAQs
Please refer to our frequently asked questions page for more.
Six: PageHeaderSimple, PageHeaderAvatar, PageHeaderBannerSimple, PageHeaderBannerAvatar, PageHeaderBannerSimpleCentered and PageHeaderBannerAvatarCentered. The banner variants add a full-width gradient banner above the header, the avatar variants add a profile photo next to the title, and the centered variants center the content below the banner.
No. Each page header is a copy-and-paste composition with the content written inline, so you edit the JSX directly rather than passing props. They are assembled from library components you already have — Breadcrumbs, Avatar or AvatarProfilePhoto, Button and Input — which do take props.
The headers use <Breadcrumbs type="button" maxVisibleItems={3}> with a Breadcrumbs.Item per level. The first item is an icon-only home link (icon={HomeLine}) and the rest take text children; every item takes an href. Breadcrumbs also supports type values of "text" and "text-line", and maxVisibleItems controls when the trail collapses.
The breadcrumb trail is hidden below the lg breakpoint (md in the centered variants) and replaced by a Back link button (color="link-gray" size="xs" iconLeading={ArrowLeft}). The search field is rendered twice: a full-width size="md" Input for mobile and a size="sm" Input with the shortcut prop for desktop, each toggled with md:hidden and max-md:hidden. In the non-centered variants, the title row also switches from a column to a row layout at lg.
The banner is just a div with a Tailwind gradient (bg-linear-to-t from-[#FBC5EC] to-[#A5C0EE]) sized h-40 and lg:h-60 inside a px-1 pt-1 wrapper. Swap that div for an <img> with size-full object-cover — or replace the gradient utilities with your own background — and keep the rounded-xl and height classes so the overlapping avatar still lines up.
PageHeaderAvatar uses the standard Avatar with border and size="xl". PageHeaderBannerAvatar and PageHeaderBannerAvatarCentered use AvatarProfilePhoto with the verified prop, rendered twice so it can be size="md" on small screens and size="lg" from lg upward; AvatarProfilePhoto accepts "sm", "md" and "lg".
The page title is a real <h1>, so keep one page header per page or downgrade the heading level if you nest one. The search fields have no visible label and use aria-label="Search" instead, and the mobile back link is a Button with an href, so it renders as an anchor.