Design System/Atoms/Resizable

Resizable

Draggable panel layouts for building resizable split-view interfaces.

When To Use

  • Use Resizable when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
  • Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
  • Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

  • Do not use Resizable just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
  • Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Key exports

ResizablePanelGroup, ResizablePanel, ResizableHandle

Example Code

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@hilum/ui";

<ResizablePanelGroup direction="horizontal" className="h-[300px] rounded-xl border border-ground-100 overflow-hidden">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center bg-ground-50 p-4">
      <span className="label text-ground-400">Left panel</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center bg-white p-4">
      <span className="label text-ground-400">Right panel</span>
    </div>
  </ResizablePanel>
// ...trimmed for docs

Horizontal

Two-panel horizontal

Drag the handle to resize the left and right panels

Left panel
Right panel

Three-panel horizontal

Sidebar, main content, and details — each with a 20% minimum size

Sidebar
Main Content
Details

Vertical

Two-panel vertical

Stacked panels split between a toolbar area and main content

Header / Toolbar
Content Area

Nested

Nested panels

Horizontal split with a nested vertical group — the left handle uses withHandle={false}

Navigation
Editor
Terminal / Output