Split View

Component 1

About

Two-pane master/detail layout with a draggable, keyboard-accessible divider and min/max bounds, built on shadcn Resizable.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Split View to your project and fits it to your theme.

Code

How Split View is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  SplitView,
  SplitViewPanel,
  SplitViewResizer,
} from "@/components/ui/split-view";

export default function SplitViewDemo() {
  return (
    <div className="w-full h-[420px]">
      <SplitView className="h-full">
        <SplitViewPanel className="p-4">
          <h3 className="mb-2 text-sm font-medium">Files</h3>
          <ul className="space-y-1 text-sm text-muted-foreground">
            <li>README.md</li>
            <li>package.json</li>
            <li>src/index.ts</li>
            <li>src/components/split-view.tsx</li>
          </ul>
        </SplitViewPanel>
        <SplitViewResizer />
        <SplitViewPanel className="p-4">
          <h3 className="mb-2 text-sm font-medium">Preview</h3>
          <p className="text-sm text-muted-foreground">
            Drag the divider, or focus it and use the arrow keys to resize the
            panels. Hold Shift for larger steps.
          </p>
        </SplitViewPanel>
      </SplitView>
    </div>
  );
}