theme="light"

Background surface with a hairline border. The default.

Pick a theme below — the header re-styles itself live. The “none” theme is styled from scratch with className.

How it works

Each theme maps to a small set of token-driven classes on the header rows. Nested components read the active theme throughuseHeaderTheme()so custom actions and nav items can adapt their own colors.

The primary and dark themes flip text and border colors automatically —no extra classes needed on your logo, actions, or nav links.