Shadcn Resizable Horizontal Layout

Horizontal resizable layout. Built with the Resizable component. A free, open source shadcn resizable example you can install with npx shadcn@latest add @reui/c-resizable-1 and edit as your own code.

Horizontal resizable layout

For AI Agents

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

Best for: A header pane stacked over a content pane, split 25 to 75, with a plain line dragged up and down

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

Panes set side by side with a divider dragged left and right: use the Resizable Vertical Layout example
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, through shadcn Resizable (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))

Markdownhttps://reui.io/components/resizable/c-resizable-1.md

MCPget_example("c-resizable-1")

Installnpx shadcn@latest add @reui/c-resizable-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Resizable Horizontal Layout

Resizable

About Shadcn Resizable Horizontal Layout

Horizontal resizable layout. Built with the Resizable component. A free, open source shadcn resizable example you can install with npx shadcn@latest add @reui/c-resizable-1 and edit as your own code.

What You Can Build With Shadcn Resizable Horizontal Layout

Composes Resizable, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-resizable-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Resizable Examples

Vertical Layout Vertical resizable layout.
Mixed Directions Nested mixed-direction resizable layout.
Nested Grips Nested resizable
Animated Pill Handle with animated pill indicator
Spring Pill Handle pill with spring scale on drag
Capsule Expansion Handle with large capsule expansion on drag
Nested Pills Nested layout with animated pill handles
Three Panels Three-panel layout with animated pill handles
Size Tracking State-tracked resizable layout.

Related Shadcn Component Categories

Scroll Area
Open-source shadcn scroll area components for custom scroll regions, sidebar panes, and dense lists.
Scrollspy
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Select
Open-source shadcn select components for form selection, settings menus, and filter controls.
Separator
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Sheet
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Sidebar
Open-source shadcn sidebar components for app shells, collapsible side navigation, and dashboard layouts.

Frequently Asked Questions

When should I use Shadcn Resizable Horizontal Layout?

Use it for a header pane stacked over a content pane, split 25 to 75, with a plain line dragged up and down.

Shadcn Resizable as a whole fits:

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

For panes set side by side with a divider dragged left and right, use the Resizable Vertical Layout example. For a complete product layout with navigation, header and content area already in place, use the App Shell blocks. For task bars stretched along a timeline to change their start and end dates, use the Gantt blocks. For table rows and columns that users reorder by hand or widen at the header edge, use the Drag & Drop blocks.

How do I install Shadcn Resizable Horizontal Layout?

Run npx shadcn@latest add @reui/c-resizable-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Resizable Horizontal Layout free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Resizable Horizontal Layout use?

It composes Resizable. The shadcn CLI installs those alongside the example.

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.