# syncfusion-react-appbar

This skill helps build React navigation and action bars with AppBar. Use it for top, bottom, sticky, or responsive headers with controls and sidebars.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 661 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-appbar/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-appbar

## What it does

The skill guides an agent through building AppBar layouts for the top or bottom of a React interface. It covers navigation controls, buttons, menus, icons, titles, sidebars, and content that shifts with the available width. Spacers and separators help arrange or group controls.

It describes Light, Dark, Primary, and Inherit color modes, plus Regular, Prominent, and Dense sizing. The material also covers sticky positioning, RTL, custom CSS classes, ARIA attributes, keyboard navigation, and links with Menu, Button, DropDownButton, Sidebar, and TreeView.

The examples import `@syncfusion/ej2-react-navigations` and `@syncfusion/ej2-react-buttons`, so those packages need to be available before the app is built. Accessibility guidance refers to WCAG 2.2 and Section 508.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-appbar/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-appbar/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-appbar/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-appbar/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-appbar
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-appbar/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-appbar
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-appbar/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-appbar/SKILL.md

## When to use it
- build a branded header with navigation controls
- arrange actions in a responsive toolbar
- keep an AppBar visible while the page scrolls
- separate toolbar groups with spacing and dividers
- connect a header to a sidebar and TreeView

## Example prompts
- Build a top AppBar with a menu button, app title, and sign-in action.
- Create a dark dense toolbar with editing icons and a visual separator.
- Add a sticky bottom AppBar with Save and Cancel actions.

## Similar
- [react-native-architecture](https://affpapa.org/en/nevibecode/skills/react-native-architecture.md) — skill · 15087 installs
- [react-navigation](https://affpapa.org/en/nevibecode/skills/react-navigation.md) — skill · 4800 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · 66900 installs
- [stitch::react-components](https://affpapa.org/en/nevibecode/skills/stitchreact-components.md) — skill · 50400 installs
- [react-vite-dashboard](https://affpapa.org/en/nevibecode/skills/react-vite-dashboard.md) — skill · 5500 installs
- [react-spring-physics](https://affpapa.org/en/nevibecode/skills/react-spring-physics.md) — skill · 2400 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md