# syncfusion-react-treemaps

This skill guides agents through building Syncfusion React TreeMap views. Use it to map hierarchical data, set up drill-down, and tune how categories appear.

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

## What it does

The guide covers adding `@syncfusion/ej2-react-treemap` to a React app and connecting it to flat or nested data. A field can determine each rectangle’s size, while grouping levels let users move into subcategories. That suits views such as nested product categories or folder structures.

It also explains layout choices, value-based and category-based colors, labels, legends, tooltips, selection, and leaf-item styling. Accessibility, keyboard navigation, RTL, localization, printing, and export are covered too. TreeMap encodes values through area, so the guide points toward other chart types for time series or relationships between entities.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- add a TreeMap component to a React project
- bind flat or nested data to the visualization
- configure navigation through hierarchy levels
- color categories by value or range
- show labels, legends, and tooltips

## Example prompts
- Show me how to add `@syncfusion/ej2-react-treemap` and render my data as a TreeMap.
- Configure drill-down for the Country, State, and City levels in this component.
- Suggest a layout and color mapping for this nested category data.

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