Large Title Screen

ProNew

A scrolling screen with a large collapsing title, a pinned search bar under it and a grouped list, where the bar gains a divider only after the title has collapsed. Use this when you build a top-level phone screen such as Library or Settings that scrolls a long list.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

Guide and examples

When to use it

Use it when you build a top-level phone screen such as Library or Settings that scrolls a long list.

Do not use it for detail screens (use a small bar with a back button) or screens that do not scroll.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`title`	`string`	`required`	The large title.
`items`	`{ id: string; title: string }[]`	`required`	Rows.

Accessibility

One h1: the large title is the heading; the compact copy in the bar is hidden from assistive technology.
The search bar is a search landmark; filtering announces the count.
The collapse follows scroll position with no animation to disable.

Testing

The pattern ships with a Testing Library test (large-title-screen.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when you build a top-level phone screen such as Library or Settings that scrolls a long list.

Do not use it for detail screens (use a small bar with a back button) or screens that do not scroll.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`title`	`string`	`required`	The large title.
`items`	`{ id: string; title: string }[]`	`required`	Rows.

Accessibility

One h1: the large title is the heading; the compact copy in the bar is hidden from assistive technology.
The search bar is a search landmark; filtering announces the count.
The collapse follows scroll position with no animation to disable.

Testing

The pattern ships with a Testing Library test (large-title-screen.test.tsx) that drives it through roles and the keyboard.