Shadcn Resizable Nested Pills

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

Nested layout with animated pill handles

For AI Agents

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

Best for: Nav beside a toolbar over an editor, with an upright pill on the outer divider and a wide pill on the inner one

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 row of 3 panes with no pane split top and bottom: use the Resizable Three Panels 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

verticalPillClasses belongs on a divider in a horizontal group and horizontalPillClasses on one in a vertical group; match them by orientation
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-8.md

MCPget_example("c-resizable-8")

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Resizable Nested Pills

Resizable

About Shadcn Resizable Nested Pills

What You Can Build With Shadcn Resizable Nested Pills

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-8
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Resizable Examples

Horizontal Layout Horizontal resizable layout
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
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 Nested Pills?

Use it for nav beside a toolbar over an editor, with an upright pill on the outer divider and a wide pill on the inner one.

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 a row of 3 panes with no pane split top and bottom, use the Resizable Three Panels 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 Nested Pills?

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

Is Shadcn Resizable Nested Pills free to use?

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

Which components does Shadcn Resizable Nested Pills 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.