MiHCM
layout/@mihcm/ui·v0.21.0·stable

Resizable

Resizable panel layout with draggable dividers. Horizontal/vertical split panes for editors, dashboards, admin layouts.

ConfiguratorExamplesUsageAccessibilityApi

Resizable

Resizable panel layout with draggable dividers for split-pane interfaces.

When to use

  • Code editors — split panes for code and preview.
  • Dashboards — adjustable panel widths.
  • Email clients — three-panel layout (list, preview, detail).
  • Admin interfaces — resizable sidebars.

Import

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@mihcm/ui/Resizable';

Basic usage

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Left</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Right</div>
  </ResizablePanel>
</ResizablePanelGroup>

With grip handle

<ResizableHandle withHandle />

Vertical direction

<ResizablePanelGroup direction="vertical">
  <ResizablePanel defaultSize={30}>Header</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={70}>Content</ResizablePanel>
</ResizablePanelGroup>

Constrained panels

<ResizablePanel defaultSize={25} minSize={15} maxSize={40}>
  Sidebar
</ResizablePanel>

Composition

  • ResizablePanelGroup wraps all panels. Set direction to "horizontal" (default) or "vertical".
  • ResizableHandle renders between panels. Pass withHandle for a visible grip indicator.
  • Use minSize and maxSize (percentages) to constrain panel dimensions.
  • defaultSize sets the initial split. For persistent layouts, store the sizes and pass them on mount.
  • Sidebar — collapsible navigation panel.
  • Sheet — slide-out panel overlay.