# syncfusion-react-accordion

This skill guides coding assistants in configuring Syncfusion collapsible panels for React. It assists with expand behavior, animations, and styling.

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

## What it does

The skill teaches your coding assistant how to set up `AccordionComponent` using the `@syncfusion/ej2-react-navigations` library. Agents learn to write markup using `AccordionItemDirective` tags or initialize items via configuration properties. Both single and multiple expand behaviors are supported.

It provides implementation rules for handling transitions like SlideDown or ZoomIn, including duration adjustments. The guide also details fetching dynamic content through `addItem()`, binding data sources, and intercepting lifecycle events via `event.cancel`.

Without importing core style sheets from `@syncfusion/ej2-base` and `@syncfusion/ej2-react-navigations`, the component renders unstyled and breaks the layout visually. Teams must include compatible CSS themes such as Tailwind or Bootstrap before deploying the UI.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- build an FAQ section that toggles a single panel at a time
- create multi-step forms inside collapsible React containers
- fetch external data into panels dynamically with addItem
- customize expand and collapse animation effects

## Example prompts
- Build an FAQ block using Syncfusion React Accordion with single expand mode enabled.
- Add dynamic item loading to AccordionComponent using the addItem method.
- Configure a multi-panel accordion with Tailwind3 styles and have the first section open.

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