# syncfusion-react-dropdowns

Implementation guide for Syncfusion React dropdown components. Helps coding assistants configure AutoComplete, remote data sources, and custom filters.

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

## What it does

This skill guides coding agents through setting up Syncfusion React dropdown controls, covering AutoComplete, ComboBox, DropDownList, ListBox, Mention, and MultiSelect. It details props, event handlers, and data binding rules for both static arrays and external endpoints.

Inside, it outlines `DataManager` integration with ODataV4Adaptor, custom rendering via `itemTemplate`, and dataset handling with `VirtualScroll`. Without importing the corresponding theme CSS stylesheets, component popups render unstyled.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- render an AutoComplete input wired to local objects or external endpoints
- configure remote queries with DataManager and ODataV4Adaptor
- enable virtual scrolling for long dropdown lists via VirtualScroll
- customize row rendering using itemTemplate and groupTemplate

## Example prompts
- Create a Syncfusion AutoComplete field with StartsWith filtering and debounceDelay
- Bind a DropDownList to an external API endpoint via DataManager and virtual scrolling
- Add a ComboBox with custom popup markup using itemTemplate and groupTemplate

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