Resizable

Panels resized by dragging or the keyboard, composed from Group, Panel, and Handle.

Sidebar

Content

When to use

Use when: Side-by-side panes whose size people adjust, such as an editor and a preview.
Avoid when: The layout works at fixed sizes; resizing adds a control nobody asked for.

Installation

bunx shelf add resizable

The source lands in src/components/ui/resizable.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Resizable from "@/components/ui/resizable";

<Resizable.Group orientation="horizontal">
  <Resizable.Panel defaultSize="25%" minSize="15%">Sidebar</Resizable.Panel>
  <Resizable.Handle withHandle aria-label="Resize sidebar" />
  <Resizable.Panel>Content</Resizable.Panel>
</Resizable.Group>

Examples

Vertical

Header

Content

Nested

Groups nest to build an editor-style layout.

Sidebar

Content

Terminal

Built on

Packages: @stylexjs/stylex, react-resizable-panels
Shelf items: foundations, Icons, utils
Figma: In progress. See Designers and Figma.