‹ components

AppBar

draftv0.9.0·open in canvas

Page header — leading · title · actions, optionally sticky.

Installnpx shadcn add @cids/app-bar
Live demo

Markets

Motion · tap to replay

honors reduced-motion

None. Headers don't animate; the content scrolls under them.

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { AppBar, IconButton, Menu } from "@/design-system";

<AppBar
  title="Markets"
  leading={<IconButton aria-label="Back" variant="ghost">‹</IconButton>}
  actions={<IconButton aria-label="Settings" variant="ghost">⚙</IconButton>}
  sticky
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

`sticky`on the z ladder).

Page header — leading · title · actions, optionally sticky.

Anatomy

┌──────────────────────────────────┐
│ [‹]  Markets              [⚙][⋯] │ ← h-14, border-b,
└──────────────────────────────────┘   bg-surface-page
  └leading └title (truncates) └actions

Props

PropTypeDefaultNotes
titlestring—Required; renders as the page <h1>, truncates.
leadingReactNode—Back button / logo slot.
actionsReactNode—Right slot; gap-1 between items.
stickybooleanfalsesticky top-0 on the --z-sticky rung.
classNamestring—cn-merged.

Motion

None. Headers don't animate; the content scrolls under them.

A11y

Renders a <header> landmark with the title as <h1> — one AppBar per

page. Slot buttons must carry their own labels (IconButton enforces

aria-label). Sticky bars must not trap focus or obscure focused

elements — keep the bar h-14 and let the browser's scroll-into-view do

its job.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.