Components/Resizable

Resizable

Adjustable panels separated by draggable handles. Supports horizontal and vertical layouts, per-panel minimum sizes, and visible grip indicators. Dragging a divider grows the panel to its left (or above, in vertical mode) and shrinks the one on the other side by the matching amount — the total always sums to 100%.

Explorer33.333333333333336%

src
app
components
pages
utils
public
package.json
tsconfig.json

components/Button.tsx33.333333333333336%

export function Button({
  variant = "solid",
  size    = "md",
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        buttonVariants({ variant, size })
      )}
      {...props}
    />
  )
}

Properties33.333333333333336%

variant: solid
size: md
loading: false
disabled: false

Try dragging the dividers — the live sizes update in each header.

Installation

npx ajaxui add resizable

Vertical

Set direction="vertical" to stack panels top-to-bottom — useful for chat + console, video + transcript, preview + code.

Chat50%

Alex

Did the resize fix ship?

You

Pushed to staging, awaiting review.

Alex

Nice — preview link?

You

Sending in a sec.

Console50%

$ pnpm build
✓ Compiled successfully in 2.1s
✓ Type-checking complete
✓ 0 errors, 0 warnings

Two pane with min size

Each panel can clamp its own minimum size in percent. Dragging past the minimum stops the divider — the neighbouring panel keeps its allotted width.

Left50%

Drag the divider — this panel reports its width live above.

Right50%

The two widths always sum to 100% — minus a hairline for the handle.

Notes

Anatomy

<ResizablePanelGroup>      // owns direction + sizes state
  <ResizablePanel/>        // a region; one entry per panel in sizes[]
  <ResizableHandle/>       // a draggable separator between two panels
  <ResizablePanel/>
</ResizablePanelGroup>

Handles must sit between panels — the group walks its children and pairs each handle with the panel that precedes it. panelIndex is injected automatically; don't set it yourself.

Props

Prop	Type	Default	Description
direction	"horizontal" \| "vertical"	"horizontal"	—
defaultSizes	number[]	—	Initial percentage sizes per panel. Must sum to 100.
defaultSize	number (on Panel)	—	Per-panel initial size in percent.
minSize	number (on Panel)	5	Minimum percentage size — drag stops at this floor.
withHandle	boolean (on Handle)	false	Show a visible grip indicator centered on the handle.