# Resizable Horizontal Split - Horizontal split

> Basic horizontal ResizablePanelGroup with two equal panels.

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

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

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/resizable-resizable-horizontal-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-horizontal-split.tsx`

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

export const title = "Horizontal split";

const Example = () => (
  <ResizablePanelGroup
    className="min-h-[200px] max-w-md rounded-lg border"
    orientation="horizontal"
  >
    <ResizablePanel defaultSize="50%">
      <div className="flex h-full items-center justify-center p-6">
        <span className="text-sm font-medium">One</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize="50%">
      <div className="flex h-full items-center justify-center p-6">
        <span className="text-sm font-medium">Two</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
);

export default Example;
```