Docking system

The docking system turns the layout primitives into a full, IDE-grade workspace: draggable tabs, nested split panes, resizable side panels, an activity-bar of icons, and drag-and-drop docking, all themeable and all handled for you. This guide builds it up one piece at a time, then assembles a complete editor.

DockHost is the one component that ties everything together. The others (TabHost, SplitContainer, SideBar, CollapsiblePanel) are the parts it orchestrates, and you can also use any of them on their own.

DockHost

DockHost is the container for an entire workspace. Pass it initialTabs for a single tab area, or an initialLayout tree to pre-split it. It manages tab dragging, splitting, reordering and closing out of the box, you just describe the starting layout. It fills its parent, so give the parent a bounded size.

A bare DockHost with two tabs in one host. Drag a tab onto another region's edge to split the workspace, reorder within a host, or close with the ×. Sidebars and side panels are turned off here so you see just the tab system.

Loading preview…

00000000001
2
3
4
5
6
7
8
const tabs: TabItem[] = [
  { id: "a", title: "editor.tsx", icon: <span>📄</span>, content: <Editor /> },
  { id: "b", title: "notes.md",  icon: <span>📝</span>, content: <Notes /> },
];
 
<DockHost initialTabs={tabs}
  showLeftSideBar={false} showRightSideBar={false}
  showLeftPanel={false} showRightPanel={false} />

TabHost

A TabHost is one region of tabs: the tab bar plus the active tab's content. DockHost places one in every pane, but you can render it directly for a simple tabbed view.

TabHost is the tab bar + active-content area that DockHost places in each region. You can use it directly when you just need tabs: give it a hostId, the tabs, the activeTabId, and an onTabChange handler.

Loading preview…

00000000001
2
3
4
5
6
7
8
9
10
11
12
const [active, setActive] = useState("one");
 
<TabHost
  hostId="demo"
  activeTabId={active}
  onTabChange={setActive}
  tabs={[
    { id: "one", title: "One", content: <One /> },
    { id: "two", title: "Two", content: <Two /> },
    { id: "three", title: "Three", content: <Three /> },
  ]}
/>

SplitContainer

SplitContainer splits space between exactly two children with a draggable divider. direction is horizontal or vertical, initialSizes is the starting split as two percentages.

SplitContainer divides space between exactly two children with a draggable handle. Nest them (a horizontal split whose second child is a vertical split) for arbitrary layouts.

Loading preview…

00000000001
2
3
4
5
6
7
<SplitContainer direction="horizontal" initialSizes={[32, 68]}>
  <Sidebar />
  <SplitContainer direction="vertical" initialSizes={[64, 36]}>
    <Editor />
    <Panel />
  </SplitContainer>
</SplitContainer>

SideBar is the slim activity rail (think the icon column in an editor). Each icon is a SideBarIconConfig with an id, an icon node and a position (top or bottom). It is controlled through selectedIconId and onIconSelect.

SideBar is the 48px activity rail. Icons take a position of top or bottom; selection is controlled with selectedIconId + onIconSelect.

Loading preview…

00000000001
2
3
4
5
6
7
const icons: SideBarIconConfig[] = [
  { id: "files",    icon: <FilesIcon />,  position: "top" },
  { id: "search",   icon: <SearchIcon />, position: "top" },
  { id: "settings", icon: <GearIcon />,   position: "bottom" },
];
 
<SideBar icons={icons} selectedIconId={sel} onIconSelect={setSel} />

CollapsiblePanel

CollapsiblePanel is a titled, expandable section with a drag-to-resize bottom edge. Stack them inside a side panel to get the classic Explorer / Outline / Timeline accordion.

CollapsiblePanel is a titled section that expands, collapses and resizes by dragging its bottom edge. Stack several in a side panel, here a file tree and a code outline sharing the height 50/50.

Loading preview…

00000000001
2
3
4
5
6
<CollapsiblePanel title="Explorer" expanded={a} onExpandedChange={setA}>
  <TreeView nodes={files} />
</CollapsiblePanel>
<CollapsiblePanel title="Outline" expanded={b} onExpandedChange={setB}>
  <TreeView nodes={outline} />
</CollapsiblePanel>

A full IDE

Now everything together in a single DockHost: an activity SideBar of icons, a left panel with two CollapsiblePanels (a file TreeView and a code-outline tree, 50/50), a center editor with five tabs (three code tabs rendered with SyntaxColor, two markdown tabs rendered with MarkdownRenderer), and a bottom region split off below the editor holding a TERMINAL that streams fake compilation output plus a PROBLEMS tab.

Drag the tabs, drag the split between the editor and the terminal, collapse the panels, and switch the activity icons.

Loading preview…

Every interaction here, dragging tabs between regions, resizing the splits and panels, collapsing sections, comes from the components themselves; the only app code is the starting layout and the tab contents. That is the whole point of the docking system: describe the shape, get a real workspace.

On this page

DockHost TabHost SplitContainer SideBar CollapsiblePanel A full IDE