Resizable Panels

Headless, animated, resizable panel layout primitives for React. Docked sidebars and peer splits, collapse to rails, persistence, full keyboard support — the library owns layout, not looks.

$ bun add @blitzd/resizable-panels

View demos Read the docs

IDE shell

Explorer

resizable-panels

srcApp.tsx

import { Panel, PanelGroup } from "@blitzd/…";
// resizable shell
export default function App() {
  return (
    <PanelGroup orientation="horizontal">
      <Panel side="start" defaultSize={240} />
      <Panel />
    </PanelGroup>
  );
}

ProblemsOutputTerminal

$ pnpm d

Agent

Wrap the editor and terminal in a vertical PanelGroup.

Thought briefly

edit App.tsx · +12 −3

Nested a vertical PanelGroup inside the main pane — the terminal is now a collapsible bottom panel with side="end".

Nice. Can the terminal start collapsed?

Thought briefly

terminal.collapse({ transition: "none" })

Done — pass defaultCollapsed on the Panel, or drive it imperatively like I just did. Ask me to hide or show any panel.

AgentFable 5

main00Ln 7, Col 18Prettier

1 / 7

drag the seam

nav.setSize(220)

chat.collapse()

chat.expand()

works on any edge

Not a video — the window is the library running live. Drag a seam, open a file, run a command, ask the agent. Autoplay pauses while you drive.