CollapsingHeader

CollapsingHeader

<CollapsingHeader
  title="Today"
  description="Wednesday, May 1"
  collapsedTitle="Today · Wed May 1"
  actions={<IconButton aria-label="More"><DotsIcon /></IconButton>}
/>

Install: @helixui/core

import { CollapsingHeader } from '@helixui/core'

status: beta · since: 0.5.0

Tags: mobile, ios, scroll, header, large-title

Anatomy

(collapsed top)  Title                    [actions]
(expanded top)
  Hero Title
  ─────────────────────────
  page content scrolls under it

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — expanded ~120px, collapses to ~52px on scroll
• stackable — false
• fullBleed — true

Visual

An iOS-style header that starts as a large hero title at rest and fades into a compact sticky title with right-aligned actions as the page scrolls down.

Props

Name	Type	Default	Description
title	ReactNode	—	Headline shown when the header is at full height.
collapsedTitle	ReactNode	—	Compact title shown when collapsed. Defaults to title.
description	ReactNode	—	Lead paragraph below the title.
actions	ReactNode	—	Right-aligned actions (visible in both states).
minHeight	number	56	Collapsed height (px).
maxHeight	number	140	Expanded height (px).
scrollContainer	HTMLElement | null	—	Element whose scroll drives the collapse. Defaults to window.

Tokens used

color.bg.surface.default, color.text.primary, color.text.secondary, color.border.default, space.1, space.3, space.4, font.family.sans, font.size.sm, font.size.md, font.size.3xl, font.weight.semibold, font.weight.bold, shadow.sm

Accessibility

Notes

• The header includes padding-top: env(safe-area-inset-top) so it clears the iOS notch.
• The compact title cross-fades; both are rendered for screen readers.

Composes with

Component	Relation	Note
PageHeader	alternative	PageHeader is static; CollapsingHeader animates with scroll.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

mobile profile page

“large title that shrinks on scroll”

<CollapsingHeader title="Profile" actions={<IconButton aria-label="Edit"><EditIcon /></IconButton>} />

Related

• PageHeader