Resizable

A high-performance system for building resizable panel layouts, complete with keyboard accessibility and nested group support.

Most UI frameworks rely on massive, complex external libraries to handle the math of dragging panels. This ResizableBlock uses a sophisticated direct-DOM manipulation engine instead. By directly writing to element.style.flex, it bypasses the React render cycle during drag operations, resulting in zero-latency, 60fps butter-smooth resizing without sacrificing declarative React composition.

Drag any handle to resize. Click a handle to focus it, then use the arrow keys — the engine ships with the ARIA separator semantics and keyboard stepping already wired.

Resizable layout

Groups nest, so a full IDE layout is a few lines.

direction: on ResizablePanelGroup sets the axis for the group and every handle inside it.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Resizable

npx shadcn@latest add @algorize-ui/resizable

components/custom/blocks/ResizableBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Resizable needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Horizontal split

defaultSize: on each panel is a percentage of the group — two panels at 40 and 60 fill it.
withHandle: on the handle renders the visible grip in the middle of the divider.

Vertical split

Setdirection"vertical": to stack the panels and turn the handle into a horizontal bar.

Size constraints

minSize{15}: and maxSize are percentages of the group; the drag clamps to them so a panel can never escape its bounds.

Features

Learn about the Resizable component's panel layout capabilities, supporting drag handles, collapsible panes, and nested groups.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`ResizablePanelGroup`	`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	The layout orientation of the group. Panels inside will stack either side-by-side or top-to-bottom.
`ResizablePanel`	`defaultSize`	`number`	`50`	The initial size of the panel, represented as a relative percentage of its parent container.
`ResizablePanel`	`minSize`	`number`	`0`	The minimum allowed size (percentage) the panel can be shrunk to.
`ResizablePanel`	`maxSize`	`number`	`100`	The maximum allowed size (percentage) the panel can be grown to.
`ResizableHandle`	`withHandle`	`boolean`	`false`	If true, renders a small visual grip icon in the center of the separator track.
All Components	`className`	`string`	`undefined`	Standard Tailwind CSS overrides. Useful for adding specific background colors or padding to panels.