OOratiq

Resizable

Ready

Draggable split panes.

Requires react-resizable-panels

Content

Installation

$ npx @oratiq-js/ui add resizable

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

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

Horizontal and vertical

Content
Top
Bottom

Hit target

The visible divider is a 1px hairline, which is far below the 24px minimum target size. The interactive area is widened with a pseudo-element, so the line stays thin while the grab region stays usable.

View source on GitHub → components/ui/resizable.tsx