# Shadcn Vertical Layout

> Vertical resizable layout.

- Type: example, free and open source (MIT)
- Component: [Resizable](https://reui.io/components/resizable.md)
- Page: https://reui.io/components/resizable/c-resizable-2
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/resizable.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/resizable.md
- MCP: `get_example("c-resizable-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-resizable-2.json
- Uses: Resizable

## Best for

A sidebar beside a content pane, split 25 to 75, with a plain 1px divider dragged left and right

## When not to use

- A header pane stacked above the content, dragged up and down: use [Horizontal Layout](https://reui.io/components/resizable/c-resizable-1.md) (`get_example("c-resizable-1")`)

## Third-party libraries

- React Resizable Panels v4: [API reference](https://github.com/bvaughn/react-resizable-panels#documentation), [docs](https://react-resizable-panels.vercel.app/), through shadcn Resizable (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))

## Install

```bash
npx shadcn@latest add @reui/c-resizable-2
```

## About Shadcn Resizable

### 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](https://reui.io/blocks/application/app-shell.md)
- Task bars stretched along a timeline to change their start and end dates: use the [Gantt blocks](https://reui.io/blocks/application/gantt.md)
- Table rows and columns that users reorder by hand or widen at the header edge: use the [Drag & Drop blocks](https://reui.io/blocks/data-grid/drag-drop.md)

### 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

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.