Glasswave UI

Resizable

Split panes with react-resizable-panels v4 (`Group` / `Panel` / `Separator`).

Resizable
Sidebar
Inbox
Drafts
Sent
Content

Drag the handle

Grab the divider in the middle and drag to resize either panel. Panels respect their minimum sizes.

Installation

1pnpm dlx shadcn@latest add @glasswave/resizable

Usage

1import {2  ResizablePanelGroup,3  ResizablePanel,4  ResizableHandle,5} from "glasswave";6 7<ResizablePanelGroup orientation="horizontal">8  <ResizablePanel defaultSize={50}>A</ResizablePanel>9  <ResizableHandle withHandle />10  <ResizablePanel defaultSize={50}>B</ResizablePanel>11</ResizablePanelGroup>

API Reference

Built on react-resizable-panels.

ResizablePanelGroup

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"

ResizableHandle

PropTypeDefault
withHandlebooleanfalse