Resizable

Resizable splits a layout into panels with draggable handles between them. Use it for split editors, a sidebar beside content, or any pane layout your users should size themselves.

Preview#

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

Installation#

npxnpx shadcn@latest add @cubby-ui/resizable

Usage#

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

<ResizablePanelGroup>
  <ResizablePanel />
  <ResizableHandle />
</ResizablePanelGroup>

Composition#

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

Place a ResizableHandle between each pair of panels.

Features#

• Collapse, expand, resize(), setLayout(), keyboard steps and a double-click reset ease over 320ms; drags track the pointer 1:1.
• Set --resizable-duration on the group to retune the easing, or 0ms to turn it off. Reduced motion turns it off too.
• Double-click a handle to reset its panel to its default size.
• Panels clip content along the resize axis instead of showing a scrollbar, and scroll along the other.
• Size the group with ordinary classes such as h-64.

Sizes#

Size props take a number or a string, and the two mean different things.

Examples#

Vertical#

Set orientation="vertical" on the group to stack panels.

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

Three Panels#

Add a ResizablePanel and ResizableHandle pair for each extra section.

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

Min and Max Size#

Use minSize and maxSize to clamp a panel; this sidebar stays between 160 and 280px while the main panel keeps at least 40%.

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

Collapsible#

Use collapsible and collapsedSize to let a panel snap shut when dragged past its minSize, and usePanelRef to toggle it from a button. This example sets collapsedThreshold={24} so the snap commits after a short drag.

"use client";
 
import * as React from "react";
import {
  Calendar03Icon,
  InboxIcon,

Grip#

Use variant="grip" to add a visible grip when the line alone is hard to find.

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

Gap#

Use variant="gap" for a gutter between panels that are cards of their own.

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

Nested#

Nest a ResizablePanelGroup inside a ResizablePanel to split in both directions.

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

Grid#

Use ResizableGrid to resize columns and rows together; drag where two gridlines cross to resize both.

import {
  ResizableCell,
  ResizableGrid,
  ResizableGridline,
} from "@/components/ui/cubby-ui/resizable";
 

Saving the Layout#

Use useDefaultLayout and give each panel an id to save the layout to localStorage and restore it on load.

"use client";
 
import * as React from "react";
 
import {
  ResizableHandle,

Accessibility#

Each handle is a separator in the tab order, with aria-valuenow, aria-valuemin and aria-valuemax.

Clicking a handle focuses it, so the arrow keys work straight after.

API Reference#

Resizable is built on react-resizable-panels v4. All of its props are supported. The documentation below covers custom props, changed behavior, and the props you need most. usePanelRef, useGroupRef, useGridRef, useDefaultLayout and useDefaultGridLayout are re-exported from the same module.

For the complete API, see the react-resizable-panels documentation.

Props#

ResizablePanelGroup#

Lays out panels and tracks their sizes. Wraps Group, minus its inline height and width, so sizing classes apply.

ResizablePanel#

One resizable region. Wraps Panel. className and style apply to the inner container, which clips along the resize axis; pass style={{ overflow: "auto" }} to scroll both ways.

ResizableHandle#

Draggable divider between two panels. Wraps Separator.

ResizableGrid#

Two-dimensional layout of cells. Wraps Grid, minus its inline height and width.

ResizableCell#

One cell of a grid. Wraps Cell and clips its content on both axes; put a scroll container inside a cell that needs one.

ResizableGridline#

Draggable line between two columns or two rows. Wraps Gridline, which forwards only className, style, disabled, elementRef and children besides the props below.

Migrating from v3#