Resizable

Flexible resizable panel layouts for editors, dashboards, email clients and documentation sites. Supports horizontal and vertical splits, nested groups, variants and custom handles.

Basic horizontal split

Use ResizablePanelGroup with direction="horizontal" to create classic split layouts. Each ResizablePanel receives a defaultSize percentage.

Vertical split & nesting

Switch direction to "vertical" for stacked layouts. You can nest panel groups to build more complex structures.

Code editor layout

Recreate code editor experiences with a sidebar, main editor and bottom terminal using nested resizable groups.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "saha-ui";

export function EditorLayout() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel defaultSize={25}>
        <div>Sidebar</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={75}>
        <div>Editor</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Email client layout

Create three-pane layouts with a resizable sidebar, list and content panel—ideal for mail clients or split views.

Analytics dashboard

Use larger panel groups to structure navigation, key metrics and chart areas in a responsive admin-style layout.

Documentation layout

Build doc sites with a resizable table of contents and main content area—great for long-form guides.

All variants showcase

Apply visual variants to the wrapper, panels and handles to express hierarchy and state (primary, secondary, glass, outline, etc.).