Resizable | arctis/ui

Split a view into panels that resize by drag or keyboard. Built on react-resizable-panels.

One

Two

Three

tsx

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"67export function Example() {8  return (9    <ResizablePanelGroup10      orientation="horizontal"11      className="min-h-[200px] w-full max-w-md rounded-md border border-border"12    >13      <ResizablePanel defaultSize="25%">14        <div className="grid h-full place-items-center">15          <span className="text-sm font-medium tracking-wide text-foreground">16            One17          </span>18        </div>19      </ResizablePanel>20      <ResizableHandle />21      <ResizablePanel defaultSize="75%">22        <ResizablePanelGroup orientation="vertical">23          <ResizablePanel defaultSize="25%">24            <div className="grid h-full place-items-center">25              <span className="text-sm font-medium tracking-wide text-foreground">26                Two27              </span>28            </div>29          </ResizablePanel>30          <ResizableHandle />31          <ResizablePanel defaultSize="75%">32            <div className="grid h-full place-items-center">33              <span className="text-sm font-medium tracking-wide text-foreground">34                Three35              </span>36            </div>37          </ResizablePanel>38        </ResizablePanelGroup>39      </ResizablePanel>40    </ResizablePanelGroup>41  )42}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add resizable

Usage

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"

1<ResizablePanelGroup2  orientation="horizontal"3  className="min-h-[200px] max-w-md rounded-md border border-border"4>5  <ResizablePanel defaultSize="25%">Sidebar</ResizablePanel>6  <ResizableHandle />7  <ResizablePanel defaultSize="75%">Main</ResizablePanel>8</ResizablePanelGroup>

Composition

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Basic

Nest groups to combine directions. This example uses a horizontal split with a vertical split on the right.

One

Two

Three

tsx

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"67export function Example() {8  return (9    <ResizablePanelGroup10      orientation="horizontal"11      className="min-h-[200px] w-full max-w-md rounded-md border border-border"12    >13      <ResizablePanel defaultSize="25%">14        <div className="grid h-full place-items-center">15          <span className="text-sm font-medium tracking-wide text-foreground">16            One17          </span>18        </div>19      </ResizablePanel>20      <ResizableHandle />21      <ResizablePanel defaultSize="75%">22        <ResizablePanelGroup orientation="vertical">23          <ResizablePanel defaultSize="25%">24            <div className="grid h-full place-items-center">25              <span className="text-sm font-medium tracking-wide text-foreground">26                Two27              </span>28            </div>29          </ResizablePanel>30          <ResizableHandle />31          <ResizablePanel defaultSize="75%">32            <div className="grid h-full place-items-center">33              <span className="text-sm font-medium tracking-wide text-foreground">34                Three35              </span>36            </div>37          </ResizablePanel>38        </ResizablePanelGroup>39      </ResizablePanel>40    </ResizablePanelGroup>41  )42}

Vertical

Use orientation="vertical" for stacked panels. Give the group a height, such as min-h-[200px].

Header

Content

tsx

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"67export function Example() {8  return (9    <ResizablePanelGroup10      orientation="vertical"11      className="min-h-[200px] w-full max-w-md rounded-md border border-border"12    >13      <ResizablePanel defaultSize="25%">14        <div className="grid h-full place-items-center">15          <span className="text-sm font-medium tracking-wide text-foreground">16            Header17          </span>18        </div>19      </ResizablePanel>20      <ResizableHandle />21      <ResizablePanel defaultSize="75%">22        <div className="grid h-full place-items-center">23          <span className="text-sm font-medium tracking-wide text-foreground">24            Content25          </span>26        </div>27      </ResizablePanel>28    </ResizablePanelGroup>29  )30}

Handle

Pass withHandle on ResizableHandle for a visible grip. The grip rotates automatically in vertical groups.

Sidebar

Content

Header

Content

tsx

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"67export function Example() {8  return (9    <div className="grid w-full max-w-md gap-6">10      <ResizablePanelGroup11        orientation="horizontal"12        className="min-h-[200px] rounded-md border border-border"13      >14        <ResizablePanel defaultSize="25%">15          <div className="grid h-full place-items-center">16            <span className="text-sm font-medium tracking-wide text-foreground">17              Sidebar18            </span>19          </div>20        </ResizablePanel>21        <ResizableHandle withHandle />22        <ResizablePanel defaultSize="75%">23          <div className="grid h-full place-items-center">24            <span className="text-sm font-medium tracking-wide text-foreground">25              Content26            </span>27          </div>28        </ResizablePanel>29      </ResizablePanelGroup>3031      <ResizablePanelGroup32        orientation="vertical"33        className="min-h-[200px] rounded-md border border-border"34      >35        <ResizablePanel defaultSize="35%">36          <div className="grid h-full place-items-center">37            <span className="text-sm font-medium tracking-wide text-foreground">38              Header39            </span>40          </div>41        </ResizablePanel>42        <ResizableHandle withHandle />43        <ResizablePanel defaultSize="65%">44          <div className="grid h-full place-items-center">45            <span className="text-sm font-medium tracking-wide text-foreground">46              Content47            </span>48          </div>49        </ResizablePanel>50      </ResizablePanelGroup>51    </div>52  )53}

Constraints

Use minSize and maxSize to set resize limits. Percentage strings, including unitless strings like "50", are relative to the group; numbers are pixels.

20%–50%

Remaining

tsx

1import {2  ResizableHandle,3  ResizablePanel,4  ResizablePanelGroup,5} from "@/components/ui/resizable"67export function Example() {8  return (9    <ResizablePanelGroup10      orientation="horizontal"11      className="min-h-[200px] w-full max-w-md rounded-md border border-border"12    >13      <ResizablePanel14        defaultSize="30%"15        minSize="20%"16        maxSize="50%"17      >18        <div className="grid h-full place-items-center">19          <span className="text-sm font-medium tracking-wide text-foreground">20            20%–50%21          </span>22        </div>23      </ResizablePanel>24      <ResizableHandle withHandle />25      <ResizablePanel minSize="30%">26        <div className="grid h-full place-items-center">27          <span className="text-sm font-medium tracking-wide text-foreground">28            Remaining29          </span>30        </div>31      </ResizablePanel>32    </ResizablePanelGroup>33  )34}

API Reference

ResizablePanelGroup

Prop	Type	Default
orientation	"horizontal" \| "vertical"	"horizontal"
resizeTargetMinimumSize	{ coarse: number; fine: number }	{ coarse: 8, fine: 4 }
className	string	—

1<ResizablePanelGroup orientation="horizontal">2  <ResizablePanel defaultSize="50%">A</ResizablePanel>3  <ResizableHandle />4  <ResizablePanel defaultSize="50%">B</ResizablePanel>5</ResizablePanelGroup>

ResizablePanel

Size props accept "25%", unitless percentage strings, or pixel numbers.

Prop	Type	Default
defaultSize	string \| number	—
minSize	string \| number	—
maxSize	string \| number	—
collapsible	boolean	—
collapsedSize	string \| number	0%
disabled	boolean	—
className	string	—

1<ResizablePanel defaultSize="50%">A</ResizablePanel>

ResizableHandle

Prop	Type	Default
withHandle	boolean	—
disabled	boolean	—
disableDoubleClick	boolean	—
className	string	—

See the react-resizable-panels docs for the full primitive API.

1<ResizableHandle />