# syncfusion-react-toolbar

This skill guides setup of Syncfusion’s React Toolbar, from item configuration to overflow behavior. Use it when building a command bar for an editor or another command-driven interface.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 613 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-toolbar/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-toolbar

## What it does

The skill covers configuring Syncfusion React Toolbar items, including buttons, separators, and input components. It explains four ways to handle overflow: horizontal scrolling, a popup, multiple rows, or rows with scrolling. Keyboard navigation and ARIA attributes are covered too.

Its guidance includes item settings, templates, styling, event handling, and changing toolbar items while an app is running. You can use it to plan button actions or keyboard responses. The material targets Syncfusion’s React component, so it does not provide setup guidance for toolbars built with another library.

For Claude Code, installation uses `npx skills` and places the skill file under `~/.claude/skills/syncfusion-react-toolbar/SKILL.md`. The project still needs the setup and dependencies for the Syncfusion component described by the skill.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-toolbar/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-toolbar -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-toolbar/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-toolbar
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-toolbar/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-toolbar -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-toolbar/SKILL.md

## When to use it
- assemble a command bar with buttons and input controls
- choose overflow behavior for a narrow container
- configure keyboard navigation and ARIA attributes
- add templates and update toolbar items at runtime

## Example prompts
- Set up a Syncfusion React Toolbar for a document editor with buttons and separators.
- Choose an overflow mode for a command bar inside a narrow container.
- Show how to handle keyboard input and update toolbar items while the app runs.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 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