layout / beta

ResizableGroup

Panels split by a 1px handle the user can drag or move with arrow keys; layout persisted by the app.

LIVE PREVIEW

Loading preview…

When to use

List + peek, sidebar + content, editor + preview.

Consider an alternative

Fixed layouts — use CSS grid.
Showing/hiding a panel — use Sheet or a toggle.

Import

import { ResizableGroup } from '@revido-llc/kit';

Keyboard interaction

Tab — focus the handle
Arrow keys — resize
Home / End — min / max
Enter — collapse (collapsible panels)

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children	ReactNode	—	Panel and Separator components that comprise this group.
className	string	—	CSS class name.

Related exports

ResizablePanel, ResizableHandle

Examples

List + peek

Persist with onLayoutChanged (fires when a drag ends) → cookie → defaultLayout.

<ResizableGroup
  id="tasks"
  defaultLayout={savedLayout}
  onLayoutChanged={(layout, meta) => meta.isUserInteraction && saveCookie("tasks-layout", layout)}
>
  <ResizablePanel id="list" defaultSize="60%" minSize="200px">…</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel id="peek" minSize="240px">…</ResizablePanel>
</ResizableGroup>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<ResizableGroup><ResizablePanel>Record list</ResizablePanel><ResizableHandle /><ResizablePanel>Record details</ResizablePanel></ResizableGroup>

Related components

Sheet ↗