Cognition

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 Cognition 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
—
Initial size as a percent of the group.
ResizablePanel.minSize
number
—
Smallest size the panel can be dragged to, in percent.
ResizablePanel.maxSize
number
—
Largest size the panel can be dragged to, in percent.
ResizablePanel.collapsible
boolean
false
Allows the panel to collapse past its minSize.
ResizablePanel.collapsedSize
number
0
Size the panel snaps to when collapsed, in percent.
ResizableHandle.withHandle
boolean
false
Shows a visible grip on the drag handle.

Sizes are percentages of the group. 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.

Do
<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/ui/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>
  );
}