# syncfusion-react-file-manager

Configures the Syncfusion React File Manager component for web apps. Guides agents through local JSON state, S3 or Azure integration, and custom toolbar controls.

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

## What it does

This skill guides coding agents on integrating Syncfusion File Manager (version 34.1.29) into React projects. It covers list and thumbnail layouts, drag-and-drop interactions, breadcrumb navigation, and tree-view panels. The reference notes also detail multi-selection workflows using Shift-click and range selection, plus virtualization for file sets exceeding 1000 items.

For offline setups, the guide demonstrates managing files in memory via a flat `FileData` JSON structure and React hooks. When hosting remote files, you must run the unified Syncfusion Docker provider with environment variables configured for Amazon S3 or Azure Blob Storage, wiring endpoints through client `ajaxSettings`.

Component styling instructions address custom icons, embedding inside dialog modals, and injecting custom tools into action bars or context menus. Accessibility guidelines include WCAG keyboard patterns and RTL localization support.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- embed a file explorer into React tabs or modal dialogs
- connect file browsing to Amazon S3 or Azure Blob Storage via Docker
- enable list virtualization for smooth scrolling across 1000+ files
- handle in-memory file operations using local JSON data and React hooks

## Example prompts
- Configure the Syncfusion File Manager component using local JSON data with custom file permissions
- Set up client ajaxSettings to pass authentication headers to the Docker file provider
- Add a custom action button to the Syncfusion File Manager toolbar and context menu

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