# App Bar

> AppBar

- Skill: `reaviz/app-bar` (Agent Skill)
- Install (CLI): `npx skillmds@latest add reaviz/app-bar`
- Raw SKILL.md: https://api.skillmd.com/api/skills/reaviz/app-bar/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: reaviz (https://skillmd.com/u/reaviz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/reaviz/app-bar

---

# AppBar

Top header bar for the chat. Reads the `theme.appbar` class string and renders arbitrary content.

## Import

```tsx
import { AppBar } from 'reachat';
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `ReactNode` | — | Content to display |
| `theme` | `ChatTheme` | `chatTheme` | Per-instance theme override |

## Usage

```tsx
<AppBar
  content={
    <div className="flex w-full items-center justify-between">
      <Logo />
      <UserMenu />
    </div>
  }
/>
```

`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
```