Docs/Resizable

Resizable

Resizable panels with draggable separator. Client component.

Usage

tsx

1'use client'
2import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@storm-ds/ui'
3
4<ResizablePanelGroup direction="horizontal">
5  <ResizablePanel defaultSize={30}>
6    <div>Left Panel</div>
7  </ResizablePanel>
8  <ResizableHandle />
9  <ResizablePanel defaultSize={70}>
10    <div>Right Panel</div>
11  </ResizablePanel>
12</ResizablePanelGroup>

Horizontal

tsx

1'use client'
2import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@storm-ds/ui'
3
4function ResizableDemo() {
5  return (
6    <ResizablePanelGroup direction="horizontal" className="border-2 border-storm-border rounded">
7      <ResizablePanel defaultSize={33} minSize={20}>
8        <div className="p-4 bg-storm-muted">Sidebar</div>
9      </ResizablePanel>
10      <ResizableHandle withHandle />
11      <ResizablePanel defaultSize={67}>
12        <div className="p-4">Main Content</div>
13      </ResizablePanel>
14    </ResizablePanelGroup>
15  )
16}

Vertical

tsx

1<ResizablePanelGroup direction="vertical">
2  <ResizablePanel defaultSize={50}>
3    <div className="p-4 bg-storm-muted">Top Panel</div>
4  </ResizablePanel>
5  <ResizableHandle />
6  <ResizablePanel defaultSize={50}>
7    <div className="p-4">Bottom Panel</div>
8  </ResizablePanel>
9</ResizablePanelGroup>

Three Panels

Sidebar

Content

Inspector

tsx

1<ResizablePanelGroup direction="horizontal">
2  <ResizablePanel defaultSize={25}>
3    <div>Left</div>
4  </ResizablePanel>
5  <ResizableHandle />
6  <ResizablePanel defaultSize={50}>
7    <div>Center</div>
8  </ResizablePanel>
9  <ResizableHandle />
10  <ResizablePanel defaultSize={25}>
11    <div>Right</div>
12  </ResizablePanel>
13</ResizablePanelGroup>

Note

Use direction prop for horizontal or vertical layout. ResizableHandle creates draggable separator. Set withHandle to show a visible handle icon.

Props

Prop	Type	Default	Description
direction	'horizontal' \| 'vertical'	-	Layout direction (on ResizablePanelGroup)
defaultSize	number	-	Default panel width/height percentage (on ResizablePanel)
minSize	number	-	Minimum panel size percentage (on ResizablePanel)
maxSize	number	-	Maximum panel size percentage (on ResizablePanel)
withHandle	boolean	false	Show handle icon (on ResizableHandle)
className	string	-	Custom classes on any sub-component

Use with AI

Create a Next.js client component using Storm UI's Resizable. Import: `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@storm-ds/ui'`. Use 'use client'. ResizablePanelGroup wraps panels (direction: 'horizontal' or 'vertical'). Each ResizablePanel has defaultSize (percentage), optional minSize/maxSize. ResizableHandle creates draggable divider. Use withHandle prop to show a visible handle icon. Example: `<ResizablePanelGroup direction="horizontal"><ResizablePanel defaultSize={30}><div>Left</div></ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize={70}><div>Right</div></ResizablePanel></ResizablePanelGroup>`

AspectRatio

ListItem