Build · New

App Header

The top of a screen: back, the screen's title and a few actions. Small keeps the title inline; Medium and Large put a bigger title below the actions for top-level screens.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/app-header

Usage

import { AppHeader } from "@/components/ui/app-header";

<AppHeader
  title="Transfer money"
  leading={<IconButton variant="ghost" shape="square" size="md" icon={ArrowLeftIcon} label="Back" />}
  actions={<IconButton variant="ghost" shape="round" size="md" icon={DotsThreeVerticalIcon} label="More" />}
/>

Examples

Medium, Large and actions only

For top-level screens: the title below the actions, with an avatar. "Actions only" has no title.

Centred title and the slot

align="center" keeps the title in the middle of the bar whatever the widths on either side, and back is a <Link>. Children fill the slot under the bar (a search field or tabs).

API reference

AppHeader

Prop	Type	Default	Description
`type`	`"small" \| "medium" \| "large" \| "actions-only"`	`"small"`	Figma's Type.
`title`	`ReactNode`		The screen's title: the page heading.
`subtitle`	`ReactNode`		Figma's Supporting text.
`align`	`"default" \| "center"`	`"default"`	Figma's Alignment.
`leading`	`ReactNode`		The start control, usually a back `IconButton`.
`actions`	`ReactNode`		Two or three actions, an avatar or a menu.
`headingLevel`	`1 \| 2 \| 3`	`1`	The title's heading level.
`children`	`ReactNode`		Figma's slot: a search field or tabs under the bar.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Through the controls in reading order: back, then the actions.

ARIA

The bar is a header, and the title is the page heading (h1 by default).
Every icon button has a name: Back, Search, Notifications, More. Touch targets are 48px.
Don't put Save or Submit only in the header.

Arabic and RTL notes

Mirrors

Back sits on the right and points right; the actions move to the left.
The title starts on the right; a centred title stays centred.

Does not mirror

The search, notification and more icons, and the avatar.

Numerals: Numbers in the subtitle (Step 2 of 3) are as you pass them.
Arabic typography: Small body-16, Medium body-20, Large heading-36, Medium weight; the heights are minimums, since Arabic titles run taller.
Mixed-direction text: Never hard-code a left arrow: ArrowLeftIcon mirrors on its own in Arabic.

All components ›