Docs › Components › Resizable

Shadcn Resizable

The shadcn/ui Resizable builds panel layouts the user can resize by dragging a handle, styled with Tailwind CSS v4 and built on react-resizable-panels. It supports horizontal and vertical splits, nested groups, and keyboard resizing. Resizable panels power split views across ShadcnStore application blocks.

Key features

• Horizontal and vertical panel groups.
• Draggable handles, optionally with a grip.
• Nested groups for complex layouts.
• Keyboard-resizable handles.
• Persist sizes with autoSaveId.

Installation

npx shadcn@latest add resizable

Usage

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

export function Example() {
  return (
    <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
      <ResizablePanel defaultSize={50}>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

Vertical and nested

<ResizablePanelGroup direction="vertical">…</ResizablePanelGroup>

Built on react-resizable-panels

Resizable is built on react-resizable-panels and is independent of the UI primitive layer.

Accessibility

• Handles are keyboard-operable with arrow keys; keep that behavior.
• Give each handle an accessible name where the layout is not obvious.
• Set sensible minSize values so panels cannot collapse unexpectedly.

When to use the Resizable

Use resizable panels for layouts the user tailors: a code editor with a file tree, an email client, or a dashboard with adjustable regions. For fixed side content, use a Sidebar or Sheet.

Used in these blocks

• Apps: split-pane editors and views.
• App shells: adjustable regions.
• Datatables: table plus detail panes.

Related components

For fixed navigation use a Sidebar; panels often contain a Data Table, a Scroll Area, or a Tabs view.

FAQ

What is the shadcn resizable used for?

The Resizable component builds panel layouts the user can resize by dragging a handle, such as split editors, sidebars, and dashboards.

How do I make vertical panels?

Set direction to vertical on ResizablePanelGroup; nest groups to combine horizontal and vertical splits.

Can panel sizes persist?

Yes. Give the group an autoSaveId to persist sizes, or control them with onLayout and your own storage.

How do I show a grip on the handle?

Add the withHandle prop to ResizableHandle.