Skip to content

v0.1.0 — release react-splitkit

Latest

Choose a tag to compare

@amareshsm amareshsm released this 06 May 11:35
· 14 commits to main since this release

react-splitkit v0.1.0

First public release — headless, resizable, tabbed panel layouts for React.

What's included

  • Infinitely composable horizontal/vertical splits via createSplit + createPanel
  • Full tab management — add, close, reorder, and move tabs between panels
  • Drag-to-resize with keyboard support (Alt+Arrow to nudge)
  • Collapse and maximize panels programmatically
  • Headless by design — zero imposed styles, you own every pixel
  • TypeScript-first with full type exports and end-to-end autocomplete
  • SSR-safe layout tree (plain JSON, serialize and restore anytime)
  • Zustand-powered state with one independent store per LayoutProvider

Install

npm install react-splitkit

Quick start

import { LayoutProvider, LayoutRoot, createSplit, createPanel } from 'react-splitkit';

const layout = createSplit('root', 'horizontal', [
  createPanel('left', [{ id: 'a', tabType: 'editor', title: 'Editor' }]),
  createPanel('right', [{ id: 'b', tabType: 'preview', title: 'Preview' }]),
]);

export default function App() {
  return (
    <LayoutProvider initialLayout={layout} registry={registry}>
      <LayoutRoot renderPanel={(p) => <MyPanel {...p} />} />
    </LayoutProvider>
  );
}

Links