Syncfusion React Splitter

This implements Syncfusion's React Splitter component for building resizable multi-panel layouts. You get horizontal and vertical orientations, nested splitters for complex arrangements, and programmatic control over pane sizing with min/max constraints. The skill covers the full API including collapse/expand functionality, resize events, and dynamic pane addition/removal at runtime. It's built for code editors, dashboards, and file explorers where users need to adjust panel sizes. The documentation is thorough with separate guides for layout patterns, accessibility, and styling. Worth noting this requires a Syncfusion license for production use, but the component handles the mechanical complexity of resize handles and layout constraints well if you're already in their ecosystem.

skills.sh installs: 678
GitHub stars: 3
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add syncfusion/react-ui-components-skills --skill syncfusion-react-splitter --agent claude-code

Installs into .claude/skills of the current project.

Files

Implementing Syncfusion React Splitter

The Splitter component creates flexible, resizable panel layouts with advanced configuration options. This skill guides you through installation, layout patterns, customization, and accessibility features.

When to Use This Skill

Use the Splitter component when you need to:

Create flexible layouts with multiple resizable panels
Build split-screen interfaces (code editors, dashboards, file explorers)
Allow users to adjust pane sizes dynamically
Display collapsible panes with expand/collapse functionality
Support different layout orientations (horizontal, vertical, nested)
Implement responsive multi-panel layouts
Add custom content types (HTML, components, selectors) to panes

Component Overview

SplitterComponent provides a container for multiple panes that users can resize by dragging separators. Each pane is defined with <PaneDirective> within <PanesDirective>.

SKILL.md on GitHub