Large Title 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

Large Title 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 LargeTitleHeader from @/components/ui/large-title-header.

"use client"

import { useState } from "react"
import { SquarePen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { LargeTitleHeader } from "@/components/ui/large-title-header"

const conversations = [
  { id: "1", name: "Daniel Reed", message: "I sent proposal #Q-2026-118." },
  { id: "2", name: "Sophia Lee", message: "Invoice #2026-0412 was paid." },
]

export function MessagesPage() {
  const [query, setQuery] = useState("")
  const results = conversations.filter((c) => c.name.toLowerCase().includes(query.toLowerCase()))

  return (
    <>
      <LargeTitleHeader
        title="Messages"
        subtitle="3 unread"
        backLabel="Settings"
        backHref="/settings"
        search
        searchValue={query}
        onSearchChange={setQuery}
        actions={
          <Button variant="ghost" size="icon" radius="full" aria-label="New message">
            <SquarePen />
          </Button>
        }
      />
      <ul className="min-h-dvh">
        {results.map((c) => (
          <li key={c.id} className="px-4 py-3">
            <p className="font-medium">{c.name}</p>
            <p className="text-sm text-muted-foreground">{c.message}</p>
          </li>
        ))}
      </ul>
    </>
  )
}

Props

• titledefault ""
  ReactNode

  The page title: large under the bar (the page's <h1>, see headingAs), compact in the bar once it scrolls away. Wraps to two lines when long; the compact copy truncates.

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

  The title's element, for the large title and, in compact mode, the bar title. Keep h1 for the screen's own header; use h2, h3 or div inside a page that already has its h1.

• subtitledefault ""
  ReactNode

  A muted line under the large title ("23 necitite").

• compactTitle
  ReactNode

  A shorter title for the bar. Default: the title.

• backLabeldefault ""
  string

  The back button's text, usually the previous page ("Settings"). The button renders when backHref or onBack is set; without a label it is a chevron named by backAriaLabel.

• backAriaLabeldefault "Back"
  string

  The back button's accessible name when it shows only the chevron.

• backHrefdefault ""
  string

  Makes the back button a link through NavLink (the app's router link).

• onBack
  () => void

  Runs when the back button is pressed (with backHref, before the navigation).

• actions
  ReactNode

  Trailing buttons in the bar: <Button variant="ghost" size="icon" radius="full" aria-label="…" /> for icons, variant="ghost" size="sm" for text.

• modedefault "collapse"
  "collapse" | "large" | "compact"

  collapse: the large title scrolls away and hands over to the bar. large: the title stays pinned at full size and never collapses. compact: only the bar, with the title always in it (detail pages).

• titleSizedefault "lg"
  "md" | "lg"

  The large title at 28px (md) or 34px (lg, iOS).

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

  The tint of the back and cancel buttons and the search field's focus ring and caret (iOS tints them). Neutral keeps the default ring.

• colordefault ""
  string

  Any CSS color for the back and cancel buttons and the search focus ring and caret. Replaces the tone.

• backgrounddefault "blur"
  "blur" | "solid" | "transparent"

  The bar's surface once content is under it: frosted glass, the solid page color, or none. The bar is transparent over the large title in every mode. Set [--bar-bg:var(--surface)] when the page is not bg-background.

• borderdefault "scrolled"
  "scrolled" | "always" | "never"

  The hairline under the bar: fades in with the surface, always visible, or never.

• searchdefault false
  boolean

  A search field under the title. Focusing it scrolls it right under the bar and shows Cancel; Escape or Cancel clears, blurs and scrolls back to the top. Keep the results at least a screen tall while searching (min-h-full) so the field can stay under the bar.

• searchValue
  string

  The query, controlled. Cancel calls onSearchChange("").

• defaultSearchValuedefault ""
  string

  The first query while uncontrolled.

• onSearchChange
  (value: string) => void

  Every change of the query, typing, clearing and Cancel.

• onSearchingChange
  (searching: boolean) => void

  True while the search is active (focused or holding a query), so the page can swap to results.

• searchPlaceholderdefault "Search"
  string

  The field's placeholder and accessible name.

• cancelLabeldefault "Cancel"
  string

  The text of the button that ends the search.

• searchInputProps
  Partial<InputProps>

  Anything else for the search Input: name, maxLength, loading, a ref, extra handlers.

• stretchdefault true
  boolean

  The large title grows up to 8% from its top corner while you pull past the top (iOS overscroll, Safari only). Off under reduced motion.

• snapdefault true
  boolean

  A scroll that comes to rest halfway through the handover settles to fully expanded or fully collapsed, so the title never stays half under the bar (iOS). A page too short to collapse settles back to expanded.

• safeAreadefault true
  boolean

  Pads env(safe-area-inset-top) above the bar so it clears the notch in a standalone PWA. It is 0 in desktop browsers.

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

  What scrolls. Default: the nearest ScrollContainerProvider, else the window.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for backHref on this header only. Usually set once for the app with LinkProvider.

• classNames
  Partial<Record<"bar" | "surface" | "hairline" | "row" | "leading" | "back" | "compactTitle" | "actions" | "large" | "title" | "subtitle" | "search" | "input" | "cancel", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root. The root is display: contents (so the bar sticks to the whole page), except in mode="large" where it is the sticky block. The root carries data-collapsed and data-searching for group- styling.

FAQ

Used in

More React mobile components