Components

Resizable

Panels joined by drag handles that let the reader resize them. Use it for split-pane layouts, editors, and any surface where controlling the proportions is useful.

Preview

One

Two

Rendered with live Folio tokens. Drag the handle to resize, no dark: classes.

Variants

One

Two

<ResizablePanelGroup direction="horizontal">

One

Two

<ResizablePanelGroup direction="vertical">

One

Two

Three

<ResizablePanel defaultSize="60">
  <ResizablePanelGroup direction="vertical">…</ResizablePanelGroup>
</ResizablePanel>

A horizontal split, a vertical split, and panels nested inside a panel for more complex layouts.

States

One

Two

Default. A plain handle, no grip.

One

Two

Dragging. Grab the grip to resize.

Rail

Editor

Collapsed. A collapsible panel at its collapsedSize.

The handle activates while dragging. A panel marked collapsible can snap to its collapsedSize.

API

Prop

Type

Default

Description

ResizablePanelGroup

component

—

Wraps the panels. Set direction to horizontal or vertical.

ResizablePanelGroup.direction

"horizontal" | "vertical"

required

Axis the panels are laid out and resized along.

ResizablePanel

component

—

A single panel within the group.

ResizablePanel.defaultSize

number | string

—

Initial size. A string is a percent of the group ("50" or "50%"). A number is pixels.

ResizablePanel.minSize

number | string

—

Smallest size the panel can be dragged to. Same units as defaultSize.

ResizablePanel.maxSize

number | string

—

Largest size the panel can be dragged to. Same units as defaultSize.

ResizablePanel.collapsible

boolean

false

Allows the panel to collapse past its minSize.

ResizablePanel.collapsedSize

number | string

Size the panel snaps to when collapsed. Same units as defaultSize.

ResizablePanel.panelRef

Ref

—

Imperative handle from useResizablePanelRef: collapse(), expand(), resize(), getSize().

ResizableHandle.withHandle

boolean

false

Shows a visible grip on the drag handle.

useResizableLayout

hook

—

Saves and restores the group layout. Pass { id, storage } and spread the result on ResizablePanelGroup.

useResizablePanelRef

hook

—

Returns a ref for ResizablePanel.panelRef, to collapse or resize a panel from code.

String sizes are percentages of the group; number sizes are pixels. Give the ResizablePanelGroup a sized parent so it has room to lay the panels out.

Don't and Do

Don't

Don't use Resizable for a layout that should stay fixed. The drag handles tell the reader the proportions are theirs to change, so applying them to a structure you want to hold steady invites edits you did not intend. Use plain layout utilities there.

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize="30" minSize="20">
    Sidebar
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="70">Editor</ResizablePanel>
</ResizablePanelGroup>

Use it for editor layouts, split views, and any surface where the reader benefits from controlling the proportion of visible content.

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

export function SplitView() {
  return (
    <ResizablePanelGroup direction="horizontal" className="h-full">
      <ResizablePanel defaultSize="50">
        <div className="flex h-full items-center justify-center p-6">One</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="50">
        <div className="flex h-full items-center justify-center p-6">Two</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}