Resizable

Accessible resizable panel groups and layouts with drag and keyboard support.

One

Two

withHandle

#Installation

bunx --bun barefoot add resizable

#Usage

One

Two

1"use client"23import {4  ResizablePanelGroup,5  ResizablePanel,6  ResizableHandle,7} from "@/components/ui/resizable"89function ResizableDemo() {10  return (11    <ResizablePanelGroup direction="horizontal" class="min-h-[200px] rounded-lg border">12      <ResizablePanel defaultSize={20} minSize={15} maxSize={40}>13        <div className="flex h-full items-center justify-center p-6">14          <span className="font-semibold">Sidebar</span>15        </div>16      </ResizablePanel>17      <ResizableHandle withHandle />18      <ResizablePanel defaultSize={55} minSize={30}>19        <div className="flex h-full items-center justify-center p-6">20          <span className="font-semibold">Content</span>21        </div>22      </ResizablePanel>23      <ResizableHandle withHandle />24      <ResizablePanel defaultSize={25} minSize={15} maxSize={35}>25        <div className="flex h-full items-center justify-center p-6">26          <span className="font-semibold">Aside</span>27        </div>28      </ResizablePanel>29    </ResizablePanelGroup>30  )31}

#Examples

#Horizontal

One

Two

1"use client"23import {4  ResizablePanelGroup,5  ResizablePanel,6  ResizableHandle,7} from "@/components/ui/resizable"89function ResizableHorizontal() {10  return (11    <ResizablePanelGroup direction="horizontal" class="max-w-md rounded-lg border">12      <ResizablePanel defaultSize={50}>13        <div className="flex h-[200px] items-center justify-center p-6">14          <span className="font-semibold">One</span>15        </div>16      </ResizablePanel>17      <ResizableHandle />18      <ResizablePanel defaultSize={50}>19        <div className="flex h-[200px] items-center justify-center p-6">20          <span className="font-semibold">Two</span>21        </div>22      </ResizablePanel>23    </ResizablePanelGroup>24  )25}

#Vertical

Header

Content

1"use client"23import {4  ResizablePanelGroup,5  ResizablePanel,6  ResizableHandle,7} from "@/components/ui/resizable"89function ResizableVertical() {10  return (11    <ResizablePanelGroup direction="vertical" class="min-h-[200px] max-w-md rounded-lg border">12      <ResizablePanel defaultSize={25}>13        <div className="flex h-full items-center justify-center p-6">14          <span className="font-semibold">Header</span>15        </div>16      </ResizablePanel>17      <ResizableHandle />18      <ResizablePanel defaultSize={75}>19        <div className="flex h-full items-center justify-center p-6">20          <span className="font-semibold">Content</span>21        </div>22      </ResizablePanel>23    </ResizablePanelGroup>24  )25}

#With Handle

Sidebar

Content

1"use client"23import {4  ResizablePanelGroup,5  ResizablePanel,6  ResizableHandle,7} from "@/components/ui/resizable"89function ResizableWithHandle() {10  return (11    <ResizablePanelGroup direction="horizontal" class="min-h-[200px] max-w-md rounded-lg border">12      <ResizablePanel defaultSize={25}>13        <div className="flex h-full items-center justify-center p-6">14          <span className="font-semibold">Sidebar</span>15        </div>16      </ResizablePanel>17      <ResizableHandle withHandle />18      <ResizablePanel defaultSize={75}>19        <div className="flex h-full items-center justify-center p-6">20          <span className="font-semibold">Content</span>21        </div>22      </ResizablePanel>23    </ResizablePanelGroup>24  )25}

#Three Panels

Sidebar

Content

Aside

1"use client"23import {4  ResizablePanelGroup,5  ResizablePanel,6  ResizableHandle,7} from "@/components/ui/resizable"89function ResizableThreePanels() {10  return (11    <ResizablePanelGroup direction="horizontal" class="min-h-[200px] rounded-lg border">12      <ResizablePanel defaultSize={20} minSize={15} maxSize={40}>13        <div className="flex h-full items-center justify-center p-6">14          <span className="font-semibold">Sidebar</span>15        </div>16      </ResizablePanel>17      <ResizableHandle withHandle />18      <ResizablePanel defaultSize={55} minSize={30}>19        <div className="flex h-full items-center justify-center p-6">20          <span className="font-semibold">Content</span>21        </div>22      </ResizablePanel>23      <ResizableHandle withHandle />24      <ResizablePanel defaultSize={25} minSize={15} maxSize={35}>25        <div className="flex h-full items-center justify-center p-6">26          <span className="font-semibold">Aside</span>27        </div>28      </ResizablePanel>29    </ResizablePanelGroup>30  )31}

#API Reference

ResizablePanelGroup

Prop	Type	Default	Description
direction	'horizontal' \| 'vertical'	-	The layout direction of panels.
class	string	''	Additional CSS classes.
onLayout	(sizes: number[]) => void	-	Callback fired when panel sizes change.

ResizablePanel

Prop	Type	Default	Description
defaultSize	number	-	Initial size as percentage (0-100).
minSize	number	0	Minimum size as percentage.
maxSize	number	100	Maximum size as percentage.
class	string	''	Additional CSS classes.

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	false	Show visible grip dots on the handle.
disabled	boolean	false	Disable drag interaction.
class	string	''	Additional CSS classes.