AppBar

The top bar of a mobile screen: back button, actions and a large title. Publishes its height when sticky.

Pro, mobile
Version 2.0.0-rc.1
APG pattern: Banner content: heading and buttons

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Inbox

Show the code

Default, code

<AppBar title="Inbox" onBack={() => {}} />

Compact

Message

Show the code

Compact, code

<AppBar compact onBack={() => {}} title="Message" />

Tokens

The 8 design tokens AppBar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 8 tokens

Tokens AppBar reads
Token	Value now	CSS variable
color.bg.canvas	…	`--sd-color-bg-canvas`
color.border.subtle	…	`--sd-color-border-subtle`
color.text.default	…	`--sd-color-text-default`
layer.sticky	…	`--sd-layer-sticky`
spacing.gap.xs	…	`--sd-spacing-gap-xs`
spacing.inset.sm	…	`--sd-spacing-inset-sm`
spacing.inset.xs	…	`--sd-spacing-inset-xs`
target.min	…	`--sd-target-min`

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/app-bar

Then import it

import { AppBar } from "@/components/ui/app-bar"

Props

AppBar props
Prop	Type	What it does
`title`required	`string`	The screen title. Drawn large under the bar (mobile large-title pattern); it is the screen's heading.
`headingLevel`	`1 \| 2`Default `1`	Heading level of the title. Default 1 (the screen's main heading).
`onBack`	`() => void`	Back action. Adds a 44px Back button at the start.
`backLabel`	`string`Default `'Back'`	Name of the back button. Default "Back".
`actions`	`ReactNode`	Actions at the end (IconButtons).
`compact`	`boolean`Default `false`	Draw the title in the bar instead of large below it.
`sticky`	`boolean`Default `true`	Stick to the top and publish its height as --sd-scroll-padding-top (2.4.11). Default true.
`className`	`string`

When to use it

Use it for

The top of every mobile screen

Use something else for

Desktop site navigation: use Navbar

Screen readers announce "Back, button" then "Inbox, heading level 1".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

Shared patterns it ships with: 2.4.12 (publishes --sd-scroll-padding-top); 2.4.10 (the title is the screen heading).

This release’s test results

Test results for AppBar in this release
axe-core (WCAG A, AA, AAA and best practice)	60 runs across every story, theme, density and width: 0 violations
Rendered text contrast	60 text runs: 0 below 7:1, lowest 16.71:1
Target size	18 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)	54 focus stops in 3 browser engines: all pass
Keyboard script	Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

AppBar keyboard steps
Key	What happens
`Tab`	Tab reaches Back
`Tab`	Then the actions, in order
`Tab`	Then the next action

In Figma

The Figma component is AppBar, with Size (Large, Compact). The Figma library isn’t published yet.

Figma to code: Size (Large, Compact = compact); Title → title; Show back → onBack; Actions → actions; nested Back → backLabel.