Split Pane Weighted

Component

About

A resizable two-pane split view whose divider carries physical weight — it trails a fast drag like a counterweighted sash and coasts into the nearest snap point on release, or stays put on a slow release far from a detent.

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

Code

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

Usage.tsx

"use client";

import SashWeight from "@/components/ui/split-pane-weighted";

export default function SplitPaneWeightedDemo() {
  return (
    <div className="h-screen w-full">
      <SashWeight
        start={
          <div className="flex h-full items-center justify-center bg-muted/30 p-4 text-sm text-muted-foreground">
            Left pane
          </div>
        }
        end={
          <div className="flex h-full items-center justify-center bg-muted/10 p-4 text-sm text-muted-foreground">
            Right pane
          </div>
        }
      />
    </div>
  );
}