# Large Title Header > A React iOS large title header that shrinks into a compact title in a glass bar as you scroll. - Type: React component (Mobile) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.1.0 - Install: `npx wingo-ui@latest add large-title-header` - Docs: https://wingo-ui.com/components/large-title-header ## Interaction Scroll the page and the large title slides up with the content, fading as it passes under the bar; exactly when it disappears the compact title rises into the bar and the glass surface and hairline fade in, all following your finger. Let go halfway through the handover and it settles to fully expanded or fully collapsed. Pull past the top on a phone and the title stretches up to 8% from its corner. Tap the search field and the page scrolls so the field sits right under the bar, the Cancel button slides in from the end and the field makes room; type to filter, tap the clear button to empty it, tap Cancel (or press Escape) to clear, close the keyboard and return to the top. The back button (a link or a button, labelled with the previous page) and the trailing actions stay in the bar at 44px on touch. With the keyboard Tab goes back, actions, search, cancel; the title is the page's only

, and when Escape or Cancel ends a search from the keyboard, focus returns to it instead of getting lost. Under reduced motion the handover is an instant switch and nothing stretches or slides. ## Installation ```bash npx wingo-ui@latest add large-title-header ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/large-title-header` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/ui/large-title-header.tsx` npm dependencies: `npm i motion lucide-react` Wingo UI dependencies (installed automatically): - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [useScrollState](https://wingo-ui.com/components/use-scroll-state) ([Markdown](https://wingo-ui.com/components/use-scroll-state.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) ## Usage ```tsx "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 ( <> } />
    {results.map((c) => (

  • {c.name}

    {c.message}

    • ))}
) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `title?` | `ReactNode` | `""` | The page title: large under the bar (the page's

, see headingAs), compact in the bar once it scrolls away. Wraps to two lines when long; the compact copy truncates. | | `headingAs?` | `"h1" \| "h2" \| "h3" \| "div"` | `"h1"` | 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. | | `subtitle?` | `ReactNode` | `""` | A muted line under the large title ("23 necitite"). | | `compactTitle?` | `ReactNode` | | A shorter title for the bar. Default: the title. | | `backLabel?` | `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. | | `backAriaLabel?` | `string` | `"Back"` | The back button's accessible name when it shows only the chevron. | | `backHref?` | `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: