# Resizable Vertical Split - Vertical split

> Vertical ResizablePanelGroup with header and content panels.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/resizable-resizable-vertical-split).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/resizable-resizable-vertical-split
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/resizable-resizable-vertical-split-light-42b88d1272aed048.png
- Registry item: https://shadcnblocks.com/r/resizable-resizable-vertical-split.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/resizable-resizable-vertical-split.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `resizable`

## Files

### `example/resizable/resizable-vertical-split.tsx`

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

export const title = "Vertical split";

const Example = () => (
  <ResizablePanelGroup
    className="min-h-[240px] max-w-md rounded-lg border"
    orientation="vertical"
  >
    <ResizablePanel defaultSize="25%">
      <div className="flex h-full items-center justify-center p-6">
        <span className="text-sm font-medium">Header</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize="75%">
      <div className="flex h-full items-center justify-center p-6">
        <span className="text-sm font-medium">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
);

export default Example;
```