u/Complex-Thought7284

I've built a react-splitkit — a headless React library for building multi-panel, tabbed, resizable layouts. Think VS Code's panel system or Cursor's IDE layout, but you bring your own styles.

Why I built it:
Every time I needed this kind of UI, my options were:

• Wire it up myself — doable, but resize math, tab state, ARIA, and keyboard nav adds up fast
• Use react-resizable-panels — great for pure resize, but no tabs
• Use Mosaic or GoldenLayout — heavy, opinionated, fights your design system (like more than I needed, and may tend to fight your design system)

So I built the headless version — zero CSS, zero opinions on markup.

What it does:

• Tabbed panels — add, close, reorder at runtime
• Split any panel horizontally or vertically, programmatically
• Collapse and maximize out of the box
• Layout is plain JSON — one onChange to save, one initialLayout to restore
• Full keyboard nav + ARIA (tablist, separator with aria-value*, modal on maximize)

Three live demos to see it in action:

• Cursor-style IDE — file explorer, editor, terminal, AI agent sidebar
• GreatFrontend-style coding platform — description, editor, browser, console
• Nested dashboard — sidebar, metrics chart, live log

Note: Still early and there's more to build, but the core is working. Would love brutal feedback on the API design — especially if something feels awkward or you'd have built it differently. If this is useful or you'd build something with it, a ⭐ on GitHub goes a long way

Layout	Light	Dark
Cursor style	https://github.com/amareshsm/react-splitkit/blob/main/cursor-layout-light.png	https://github.com/amareshsm/react-splitkit/blob/main/cursor-layout-dark.png
Great frontend style	https://github.com/amareshsm/react-splitkit/blob/main/gfe-layout-light.png	https://github.com/amareshsm/react-splitkit/blob/main/gfe-layout-dark.png

Docs - https://react-splitkit.vercel.app/docs

Demos - https://react-splitkit.vercel.app/#examples

Github - https://github.com/amareshsm/react-splitkit