# syncfusion-react-splitter

This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling.

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

## What it does

The skill explains how to use `SplitterComponent` with `PaneDirective` elements inside `PanesDirective`. It covers horizontal, vertical, and nested arrangements, pane sizes in pixels or percentages, `min` and `max` limits, and pane content supplied as HTML, React components, or CSS selectors.

Its guidance also covers adding and removing panes at runtime, programmatic expand and collapse, separator styling, themes, and the resize event lifecycle. Accessibility topics include keyboard use, ARIA, screen readers, RTL, and localization. The project needs `@syncfusion/ej2-react-layouts` for the component examples to run.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- build a two-column interface with adjustable panes
- configure a vertical split for a work area
- add a collapsible sidebar
- enforce pane limits with `min` and `max`
- react to `resizeStart`, `resizing`, and `resizeStop`

## Example prompts
- Use syncfusion-react-splitter to build a React two-pane layout with `SplitterComponent`, `PanesDirective`, and `PaneDirective`.
- Create a vertical splitter with a collapsed top pane and a content pane below it.
- Set percentage-based pane sizes and wire up `resizeStart`, `resizing`, and `resizeStop` handlers.

## Similar
- [react-doctor](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — skill · 19200 installs
- [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · 4800 installs
- [react-code-review](https://affpapa.org/en/nevibecode/skills/react-code-review.md) — skill · 4300 installs
- [react-component-generator](https://affpapa.org/en/nevibecode/skills/react-component-generator.md) — skill · 318 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · 66900 installs
- [stitch::react-components](https://affpapa.org/en/nevibecode/skills/stitchreact-components.md) — skill · 50400 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