Skip to content

Resizable

Panes resized by dragging the handle, or with the arrow keys once it has focus. Stacked on small screens.

Sourcecomponents/resizable.tsx

Editor and preview (side by side from md, stacked below)

Editor
Preview

Usage

Resizable usage
import { ResizableGroup, ResizableHandle, ResizablePanel } from "@/components/resizable";
export function ResizableUsage() {  return (    <ResizableGroup orientation="horizontal" className="hidden md:flex">      <ResizablePanel defaultSize="30%" minSize="20%">        Brief list      </ResizablePanel>      <ResizableHandle aria-label="Resize brief list" withGrip />      <ResizablePanel>Brief</ResizablePanel>    </ResizableGroup>  );}

When to use

Use when

Desktop work surfaces: editor and preview, list and detail. Name every handle

Don’t use when

Page layout; side-by-side panes on a phone (stack them below md)