Back

Cursor UI layout

IDE clone · file explorer + editor + terminal + AI agent — all resizable

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
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}
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 %
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