Resizable

Two panels with a draggable divider. Sizes are percentages, so the split survives a container resize — and the handle is a real slider, so arrow keys resize it too.

src/components/ui/resizable.tsx

About

From the component's own source, where it was written.

Two panels with a draggable divider between them.

Sizes are percentages, so the split survives a container resize. Pointer capture is what makes the drag reliable — without it, moving faster than the browser repaints drops the pointer outside the handle and the drag stops.

The handle is also a real slider: arrow keys move it, which is the only way a keyboard user can resize at all.

Install

npx astralyx-ui add resizable

Usage

import { Resizable } from '@/components/ui/resizable'

<Resizable defaultSize={40} minSize={20} maxSize={80}>
  <aside>…</aside>
  <main>…</main>
</Resizable>

Composer

Change the props and the source below follows.

One

Two

Props

orientation

defaultSize

tsx

<Resizable orientation="horizontal" defaultSize={50}>
  <div>One</div>
  <div>Two</div>
</Resizable>

Examples

Horizontal

tsx

<Resizable defaultSize={35}>…</Resizable>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Resizable`

Two panels with a draggable divider between them.

Extends Omit<ComponentProps<'div'>, 'children' | 'onResize'>.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Which way the panels split.
defaultSize	number	50	Percentage taken by the first panel.
minSize	number	15	Clamps, so a panel can never be dragged to nothing.
maxSize	number	85	Clamps, so a panel can never be dragged to nothing.
onResize	(size: number) => void	—	Fires with the new percentage.
responsive	Responsive	'md'	Breakpoint below which the panels stack, since two columns on a phone leave each about 180px. Unlike the other responsive components this is a real orientation change rather than a CSS one — the pointer maths, the arrow keys and the ARIA orientation all depend on which axis is being dragged.
handleLabel	string	'Resize panels'	Accessible name for the drag handle.
children	[ReactNode, ReactNode]	required	—

Behaviour

Topic	Detail	Description
keyboard	arrows	Arrows move by 2%, Shift+arrows by 10%, Home and End jump to the limits.