Shadcn Resizable

Browse 10 production-ready shadcn resizable components for multi-panel layouts, dashboard dashboards, and flexible content grids. Resizable is compatible with Radix UI and Base UI composition models and fully aligned with Shadcn Create so radius, colors, and typography match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Split views that set a sidebar beside content or a header over a body, sized by dragging the divider
Editor and IDE style workspaces of 3 or more panes, in one row or nested across both directions
Layouts that read live pane sizes back into app state, such as a percentage readout

When not to use

A complete product layout with navigation, header and content area already in place: use the App Shell blocks
Task bars stretched along a timeline to change their start and end dates: use the Gantt blocks
Table rows and columns that users reorder by hand or widen at the header edge: use the Drag & Drop blocks

Agent notes

A number in defaultSize or minSize is read as pixels, not percent; pass a string such as 30% when a panel should take a share of the group
orientation vertical stacks the panels with horizontal dividers between them and horizontal sets them side by side; the v4 group has no direction prop
react-resizable-panels needs every Panel and Separator to be a direct DOM child of its Group, so never wrap a ResizablePanel or ResizableHandle in a div

Third-party API docs

React Resizable Panels v4: API reference, docs (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))

Markdownhttps://web.dev.reui.io/components/resizable.md

MCPget_component("resizable")

Installnpx shadcn@latest add resizable

Full index for agents:llms.txtReUI MCP setup

Shadcn Resizable: Flexible Multi-Panel Layouts

Shadcn Resizable is a layout component for building adjustable multi-panel interfaces: code editors, IDE-style dashboards, and canvas tools where users control panel sizes. Built on react-resizable-panels by bvaughn, it supports mouse, touch, and keyboard dragging while integrating seamlessly with Radix UI components and full Shadcn Create style compatibility.

It provides horizontal and vertical draggable dividers between panels, with snapping, collapsible behavior, and persistent size state so users' layout preferences are remembered.

ReUI lists resizable components inside dashboards, editors, and split-view layouts so you evaluate divider affordance, collapse triggers, and how panels pair with Shadcn Card content. The sections below explain what the component is, why teams use it, key features, and integration guidance.

What is Shadcn Resizable?

A resizable panel group is a container that holds one or more draggable dividers and panels, allowing users to adjust panel widths or heights. Shadcn Resizable wraps react-resizable-panels to provide keyboard-accessible dragging, touch support, and collapsible panel logic.

Components here show horizontal splits (sidebar + content), vertical splits (editor + preview), and nested splits for complex UIs. They help you decide panel defaults, min/max sizes, and whether to persist layout state to localStorage so users' preferences are remembered on return visits.

Why Use Shadcn Resizable?

Teams use resizable panels when users benefit from controlling layout. Code editors, data dashboards, and design tools all let power users customize how much space each view occupies, improving focus and productivity.

The components on this page show how to build editor and dashboard layouts where panels adjust dynamically, and how to pair resizable with Shadcn Card content containers.

Shadcn Resizable Features

Horizontal and Vertical Splits. Set orientation to 'horizontal' (side-by-side) or 'vertical' (stacked); nest groups for complex multi-pane layouts.
Draggable Dividers. Mouse, touch, and keyboard users can drag dividers to resize panels. Cursor changes to col-resize or row-resize for affordance.
Min and Max Constraints. Set minSize and maxSize on each panel to prevent collapse or excessive expansion; useful for sidebars and fixed-width components.
Collapsible Panels. Add collapse triggers or double-click dividers to collapse/expand panels; great for hiding sidebar navigation on mobile.
State Persistence. Pair with localStorage to save user's layout preferences so resizing is remembered across page reloads.

Place Shadcn Card or custom content inside each ResizablePanel to create modular, resizable sections. Use Shadcn Button on panel headers for collapsing, full-screen, or other panel-specific actions.

Pair resizable with Shadcn Navigation Menu or Shadcn Sidebar in the left panel, and content views in the center/right panels. Add Shadcn Tabs inside panels for multi-view switching within a single panel.

Use Shadcn Tooltip on the resize handle to hint 'Drag to resize' on hover. Combine with Shadcn Dialog or Shadcn Sheet for modal actions that don't permanently change the layout.

App Shell Blocks in ReUI Pro

The free examples above pair with 35 production ready app shell blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

App Shell (35 blocks)App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.

Browse all Application blocks

Frequently Asked Questions

How do I build an editor-style two-pane layout with resizable?

Use ResizablePanelGroup with orientation='horizontal'. Add two ResizablePanels with content inside, and a ResizableHandle divider between them. Set minSize on each panel to prevent complete collapse.

Can I save the user's panel sizes and restore them on page reload?

Yes. Listen to ResizablePanelGroup onLayout changes, store sizes in localStorage, and use defaultSizes to restore on mount. This creates a seamless experience where users' customizations persist.

How do I collapse or expand a panel programmatically?

Use the collapse() and expand() methods available on ResizablePanel refs. Pair with a Shadcn Button to allow users to toggle sidebar visibility with keyboard shortcuts or menu items.

Can resizable panels work on mobile or touch devices?

Yes. react-resizable-panels supports touch dragging out of the box. On narrow screens, consider collapsing one panel by default so the primary content is full-width, with a menu button to reveal the sidebar.

What is the divider (ResizableHandle) and how do I customize it?

The handle is the draggable zone between panels. Customize its width/height with className (e.g., 'w-1'), color, and hover effects. Add a visual indicator (vertical or horizontal line) so users understand they can drag.

How do I add keyboard shortcuts for resizing or collapsing?

Capture keyboard events (e.g., Cmd+B to toggle sidebar) and call collapse()/expand() on panel refs. Always show keyboard shortcuts in a help menu so power users discover them.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.