AppBar resolves its theme via useComponentTheme<ChatTheme>('chat', customTheme) from reablocks, so it picks up the same theme provider as the rest of the chat.
Render it outside <Chat> (as a sibling header) or inside the panel — it has no context dependency.
Theme key
theme.appbar
1---2name: app-bar3description: AppBar4---5# AppBar67Top header bar for the chat. Reads the `theme.appbar` class string and renders arbitrary content.89## Import1011```tsx12import { AppBar } from 'reachat';13```1415## Props1617| Prop | Type | Default | Description |18|------|------|---------|-------------|19| `content` | `ReactNode` | — | Content to display |20| `theme` | `ChatTheme` | `chatTheme` | Per-instance theme override |2122## Usage2324```tsx25<AppBar26 content={27 <div className="flex w-full items-center justify-between">28 <Logo />29 <UserMenu />30 </div>31 }32/>33```3435`AppBar` resolves its theme via `useComponentTheme<ChatTheme>('chat', customTheme)` from reablocks, so it picks up the same theme provider as the rest of the chat.3637Render it outside `<Chat>` (as a sibling header) or inside the panel — it has no context dependency.3839## Theme key4041```42theme.appbar43```
Run npx skillmds@latest add reaviz/app-bar in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
AppBar It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.
reaviz