Resizable panels
A React component in Beamline's Layout category.
Panes that trade space across draggable dividers; each divider is a focusable separator with arrow keys, limits, folding for collapsible panes and double-click to restore.
Use it for
- Split views people resize: mail, editor and preview, list and detail.
Not for
- Fixed layouts whose sizes never change (CSS grid).
Anatomy
- root (unpainted; the caller's one m-surface frame holds the split)
- pane (unpainted, scrolls its own content)
- divider (1px line-soft seam, 13px hit area)
- grip (visible at rest; accent on hover, drag and focus)
Variants
- direction: horizontal, vertical
States
- rest (seam + grip)
- hover / dragging (seam lit 3px accent, grip accent)
- focus-visible (look's focus ring round the grip)
- folded (pane at 0, grip ink-3; Enter unfolds)
Keyboard
- ← → (↑ ↓ stacked) by 5%, Shift by 10%
- Home / End to the limits
- Enter folds a collapsible neighbour
Motion
The seam and grip light at once on hover or press and fade over --pui-motion-out; panes follow the pointer with no easing; focus is never animated.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
direction | "horizontal" | "vertical" | "horizontal" | |
onLayoutChange | (sizes: number[]) => void | — | |
storageKey | string | — | |
ResizablePanel | { id, label, defaultSize?, minSize? (px), maxSize? (px), collapsible? } | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | ResizablePanelsClassNames | — |
Import
import { ResizablePanel, ResizablePanels } from "@/components/resizable-panels/resizable-panels";Get it
Resizable panels is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Layout
- Accordion: Topics that open in place, one at a time or several: FAQs and settings sections; each header is a button and the panel's height follows its content.
- Aspect ratio: Holds media, video and embeds at a fixed width-to-height ratio while the layout resizes.
- Bezel: A double-bezel frame: an outer shell with a hairline, a small gap, and an inset panel with its own edge, so a preview, chart or media reads as set into…
- Card: A record or a small group of related content and actions: optional media, avatar, title, status, action, meta, free content and a Details toggle; plain…
- Carousel: A row of slides that snap into place: swipe on touch, drag or the arrows with a mouse, ← → when focused, or the dots; optional autoplay that pauses and…
- Collapsible: One region that opens and closes in place from its trigger, its height animating to the content.
- Direction: Sets left-to-right or right-to-left for everything inside: text and logical spacing flip, and Radix parts read the direction for keys and placement.
- Expandable card: A dense card that grows in place when asked: the frame resizes and the clamped preview opens into the full text.
- Scroll area: A native scroll region with thin overlay thumbs and edge fades that show only where more content waits; thumbs can be dragged or clicked.
- Separator: A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning.
- UI root: Makes a region of any app a Beamline root: theme, brand and direction for everything inside, and a matching layer at page level where its menus, dialogs…