Explorer
React-splitkit
.claude
.storybook
dist
node_modules
src
components
core
hooks
state
index.ts
stories
tests
web
app
components
content
lib
next.config.ts
package.json
tsconfig.json
.gitignore
.npmrc
eslint.config.js
LICENSE
package.json
README.md
tsconfig.json
tsup.config.ts
vitest.config.ts
package.json
index.ts
package.json (web)
1{2 "name": "react-splitkit",3 "version": "0.1.0",4 "description": "Headless layouts",5 "main": "./dist/index.cjs",6 "module": "./dist/index.js",7 "types": "./dist/index.d.ts",8 "license": "MIT",9 "workspaces": ["web"]10}
1// Public entry — re-exports the headless API2export * from "./core/types";3export * from "./core/tree";4export * from "./core/registry";5export * from "./state/store";6export * from "./state/context";7export * from "./hooks/useLayout";8export * from "./hooks/usePanel";9export * from "./components/LayoutRoot";10export * from "./components/TabList";11export * from "./components/TabPanel";12export * from "./components/Resizer";
1{2 "name": "react-splitkit-web",3 "version": "0.0.1",4 "private": true,5 "scripts": {6 "dev": "next dev --turbopack",7 "build": "next build"8 },9 "dependencies": {10 "next": "^15.3.0",11 "react": "^18.3.0",12 "react-splitkit": "*"13 }14}
Problems
Output
Terminal
Ports
No problems have been detected in the workspace.
[Info - 14:32:01] Initializing TypeScript language service…
[Info - 14:32:02] TypeScript Server: 5.6.0
[Info - 14:32:02] Loaded 312 files, ready.
[Info - 14:34:18] Reanalyzing project after edit (web/app/page.tsx).
[Info - 14:34:18] Diagnostics computed in 84ms.
amaresh@workstation react-splitkit % npm run build
> react-splitkit@0.1.0 build
> tsup
CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v8.5.1
CLI Target: es2020
ESM dist/index.js 32.4 kB
CJS dist/index.cjs 34.1 kB
DTS dist/index.d.ts 12.7 kB
⚡️ Build success in 642ms
amaresh@workstation react-splitkit % ▌
PortProcessURL
3000next devlocalhost:3000
6006storybook— not running
New Agentsandbox · 1h ago
You
what is react-splitkit and how is it built?
Agent
react-splitkit is a headless React layout library for IDE-style multi-pane UIs. The whole layout is a serializable tree of two node types — SplitNode (a container with direction + children + sizes) and PanelNode (a leaf with tabs). Mutations go through a pure reducer wrapped in a Zustand store, so you can split, resize, add/move tabs, collapse, and maximize without touching the DOM.
You
does it handle custom UI? I want my own tab and panel design.
Agent
Yes — it's fully headless. The library ships zero CSS and no opinionated markup. You pass renderPanel and renderTab functions and return whatever JSX you want. The library only handles state, ARIA, keyboard, and resize math. You own every pixel — Tailwind, CSS Modules, or plain CSS, your choice.
Plan, Build, / for commands, @ for context
AgentAuto
main0 errors · 0 warnings
UTF-8TypeScript ReactLn 1, Col 1