Resizable panels
Trade space between panes by dragging the divider between them.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
Content
Details
- Editor, mail, or dashboard layouts where people trade space between side-by-side panes.
- Sidebars that should collapse by dragging or flicking toward the edge.
- Layouts whose pane sizes should persist between visits via onLayoutChange.
- Use drawer for a panel that slides over the page.
- Use tabs when only one pane needs to be visible at a time.
- Avoid it for vertical splits, since it is horizontal only.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ResizablePanel } from 'animui/resizable-panels';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { ResizablePanel, ResizablePanels } from "animui/resizable-panels"; export function MailLayout() { return ( <div style={{ height: 480 }}> <ResizablePanels label="Mail" onLayoutChange={saveLayout}> <ResizablePanel id="folders" label="Folders" defaultSize={22} minSize={160} collapsible> <FolderList /> </ResizablePanel> <ResizablePanel id="messages" label="Messages" defaultSize={78}> <MessageList /> </ResizablePanel> </ResizablePanels> </div> );}API reference
2 parts. The first is the root.
ResizablePanels
A horizontal split view with draggable, keyboard-operable dividers between panes. Needs a definite height.
PropTypeDefaultDescription
childrenRequiredReactNode–ResizablePanel elements in order. The set of panes should stay stable.labelstring–aria-label for the group.onLayoutChange(sizes: number[]) => void–Called with each pane's share in percent after a resize settles.classNamestring–Class on the group element.ResizablePanel
Configuration for one pane. The group renders it.
PropTypeDefaultDescription
idRequiredstring–Stable id, used by the divider's aria-controls.labelRequiredstring–Names the pane for its divider.defaultSizeRequirednumber–Starting share of the group. Shares are relative and need not sum to 100.minSizenumber80Width in px where the pane starts to resist. Content clips and fades below it.maxSizenumber–Maximum width in px.collapsibleboolean–Dragging well past the minimum or flicking toward the edge snaps the pane closed.defaultCollapsedboolean–Starts collapsed. Requires collapsible.classNamestring–Class on the pane.childrenReactNode–Pane content.- ArrowLeftorArrowRight
- Moves the focused divider 16px; with Shift, 64px. Past a limit, collapses a collapsible pane.
- HomeorEnd
- Moves the divider to its minimum or maximum.
- Enter
- Collapses or restores a collapsible neighbouring pane.
- Escape
- During a drag, returns the divider to where it started.
- Each divider is a focusable role="separator" with aria-orientation, aria-controls, aria-valuenow, min, and max in percent.
- aria-valuetext announces the share, or that a pane is hidden and Enter shows it.
- Collapsed panes are inert. The group has role="group"; pass label to name it.
- Dividers follow the pointer 1:1, rubber-band past limits, and spring to rest; flicks toward an edge collapse a pane. Double-click resets the layout.
- Pane content fades as it is squeezed below its minimum and a restore tab pops in on a snappy spring.
- Reduced motion jumps panes to their targets and fades the restore tab.
- Panes do not stack on narrow screens; on mobile, render a single pane or switch to tabs yourself.
- Dividers use pointer capture with touch-action none, so touch, pen, and mouse drags all work.
- The group needs a definite height from its parent.
- A ResizeObserver on the group refits pane widths when the container resizes.
- Dragging sets widths directly and springs only on release or collapse; pane content is never re-rendered by the drag itself.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for editor, mail, or dashboard layouts where people trade space between side-by-side panes. Horizontal only.
- Give the parent a definite height and persist onLayoutChange shares to restore via defaultSize.
The full library index for assistants is at /llms.txt.