Introduction
Headless, resizable, tabbed, splittable layout primitives for React.
What is react-splitkit?
react-splitkit is a headless layout library for React that lets you build IDE-grade, resizable, tabbed panel layouts — without any imposed styling.
You supply the chrome (tab bars, resizers, panel wrappers). The library manages all the state: sizes, active tabs, splits, collapse, and maximize.
Features
- Headless — zero styles; you bring Tailwind, CSS-in-JS, or plain classnames
- Resizable — drag dividers to resize in any direction
- Tabbed — each panel holds multiple tabs; add, remove, and reorder at runtime
- Splittable — panels split horizontally or vertically programmatically
- Collapsible / Maximizable — built-in collapse and maximize out of the box
- Composable — nested splits compose recursively to any depth
- TypeScript-first — fully typed with exported types for all primitives
Live examples
| Example | Description |
|---|---|
| Two-column split | Simple horizontal split with resizing |
| Nested IDE layout | Sidebar + editor/console — the IDE shape |
| GreatFrontend layout | Full coding-platform UI with tabs, browser pane |
| Cursor UI layout | Cursor-style IDE — file explorer, editor, terminal, AI agent |
FAQ
Contributing & issues
react-splitkit is actively maintained. If something isn't working or you have an idea for a new feature, we'd love to hear from you.
- Found a bug? Open an issue with a minimal reproduction and we'll take a look.
- Have a feature request? Start a discussion describing your use case — we consider all requests.
- Want to contribute? Open an issue first so we can align on the approach, then submit a pull request.