Resizable Panels

A flexible resizable split-pane layout component for building IDE-style interfaces, dashboards, and side-by-side content views. Supports horizontal and vertical orientations, min/max constraints, collapsible panels, and nested layouts.

Live Preview

Drag the handle between panels to resize them interactively.

Horizontal Split

Left Panel

This panel is resizable. Drag the handle to adjust the split ratio. Current width: 50.0%

Right Panel

50.0%

Click and drag the center handle to resize panels

Installation

Install the Aidash Components package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the ResizablePanels component into your file.

tsx
import { ResizablePanels, Panel } from '@/components/aidash/resizable';

Basic Usage

A simple horizontal two-panel split layout with equal widths.

Panel A
Panel B
Basic Usage
tsx
<ResizablePanels direction="horizontal" defaultSizes={[50, 50]}>
<Panel>
  <div className="p-4">Panel A</div>
</Panel>
<Panel>
  <div className="p-4">Panel B</div>
</Panel>
</ResizablePanels>

Vertical Split

Stack panels vertically with a horizontal drag handle between them.

Top Panel (60%)
Bottom Panel (40%)
tsx
1<ResizablePanels direction="vertical" defaultSizes={[60, 40]}>2<Panel>3  <div className="p-4">Top Panel</div>4</Panel>5<Panel>6  <div className="p-4">Bottom Panel</div>7</Panel>8</ResizablePanels>

Three Panels

Split into three panels with two independent drag handles.

Sidebar
Main Content
Inspector
tsx
1<ResizablePanels defaultSizes={[25, 50, 25]}>2<Panel>3  <Sidebar />4</Panel>5<Panel>6  <MainContent />7</Panel>8<Panel>9  <Inspector />10</Panel>11</ResizablePanels>
Tip
The defaultSizes array must have one entry per panel, and the values should sum to 100.

Min/Max Constraints

Set minimum and maximum sizes to prevent panels from becoming too small or too large.

Sidebarmin: 20% / max: 40%
Contentmin: 60%
tsx
1<ResizablePanels2defaultSizes={[30, 70]}3minSizes={[20, 60]}4maxSizes={[40, 100]}5>6<Panel>7  <Sidebar />8</Panel>9<Panel>10  <Content />11</Panel>12</ResizablePanels>

Collapsible Panel

Panels that collapse completely when dragged below a pixel threshold, useful for toggleable sidebars.

Collapsed
Main Content (sidebar collapsed)
tsx
1<ResizablePanels2defaultSizes={[25, 75]}3collapsible4collapseThreshold={50}5>6<Panel>7  <Sidebar />8</Panel>9<Panel>10  <MainContent />11</Panel>12</ResizablePanels>13 14{/* Panel collapses to 0 when dragged below 50px */}

Nested Layouts

Combine horizontal and vertical splits to create complex IDE-like layouts.

File Tree
Editor
Preview
Terminal / Output
tsx
1<ResizablePanels direction="vertical" defaultSizes={[60, 40]}>2<Panel>3  {/* Horizontal split inside vertical panel */}4  <ResizablePanels direction="horizontal" defaultSizes={[25, 50, 25]}>5    <Panel><FileTree /></Panel>6    <Panel><Editor /></Panel>7    <Panel><Preview /></Panel>8  </ResizablePanels>9</Panel>10<Panel>11  <Terminal />12</Panel>13</ResizablePanels>
Performance
Nested resizable panels each maintain their own state. For deeply nested layouts, consider memoizing panel content with React.memo to avoid unnecessary re-renders during resize.

Props API

Complete list of props accepted by the ResizablePanels component.

ResizablePanels
PropTypeDefaultDescription
direction'horizontal' | 'vertical''horizontal'Orientation of the split layout
defaultSizesnumber[][50, 50]Initial sizes as percentages for each panel
minSizesnumber[][]Minimum size (%) for each panel
maxSizesnumber[][]Maximum size (%) for each panel
onResize(sizes: number[]) => void—Callback fired when panel sizes change
handleSizenumber4Width (or height) of the drag handle in pixels
collapsiblebooleanfalseWhether panels can collapse when dragged below threshold
collapseThresholdnumber50Pixel distance below which a panel collapses
classNamestring''Additional CSS classes for the container

Accessibility

Built-in accessibility features for inclusive resizable layouts.

ARIA Splitter Role

Each drag handle uses role="separator" with aria-orientation set to match the split direction. Screen readers announce the handle as a resizable splitter.

Keyboard Resize

Focus a handle and use Arrow Left / Arrow Right (horizontal) or Arrow Up / Arrow Down (vertical) to adjust panel sizes in 1% increments. Hold Shift for 10% jumps.

Value Reporting

Handles expose aria-valuenow, aria-valuemin, and aria-valuemax to communicate the current panel size to assistive technologies.

Focus Visible

Drag handles display a visible focus ring when navigated with the keyboard, matching the design system's focus styles.

tsx
1// Arrow keys resize in 1% increments2// Shift + Arrow resizes in 10% increments3// Home / End move to min / max size4// Enter toggles collapse (when collapsible=true)5 6<ResizablePanels>7{/* Handle receives role="separator" automatically */}8<Panel>Content A</Panel>9<Panel>Content B</Panel>10</ResizablePanels>

Related

Other components that pair well with resizable panels.

Card

Container component for panel content with consistent styling and structure.

Dialog

Modal overlay that can contain resizable panel layouts for complex editing workflows.