Resizable

Draggable split-pane panels for adjustable layouts. Supports horizontal and vertical split directions with an optional visible grip handle indicator.

✓Horizontal and vertical split directions
✓Optional grip handle indicator
✓Persists panel sizes
✓Built on react-resizable-panels

Panel A

Panel B

import { Resizable }from "@aetherstack/ui"

resizable.tsx

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-[160px] rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-4">Panel A</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-4">Panel B</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Usage

Vertical split

Use orientation='vertical' to split panels top and bottom.

Top

Bottom

Three panels

Chain multiple panels with handles for a sidebar + content + detail layout.

Nav

Content

Detail

Props

Prop	Type	Default	Description

ResizablePanelGroup

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	—	The axis along which panels are split. Required.
className	string	—	Additional Tailwind classes on the group container.

ResizablePanel

Prop	Type	Default	Description
defaultSize	number	—	Initial panel size as a percentage of the group.
minSize	number	—	Minimum panel size as a percentage — prevents over-collapsing.
maxSize	number	—	Maximum panel size as a percentage.

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	false	Renders a visible grip icon in the center of the resize handle.
className	string	—	Additional Tailwind classes on the handle element.

* Required props

Accessibility

→ResizableHandle renders with role='separator' and is keyboard operable — arrow keys resize adjacent panels.
→Add aria-label to ResizablePanelGroup to describe the layout region to screen reader users.
→Ensure minSize is set so panels never collapse to zero, which would hide content from all users.