Resizable

Two panes and a keyboard-accessible handle between them.

Layoutlayoutpanessplit

Workbench

Rendering Resizable…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add resizable

Usage

TSX

import { Resizable } from "@/components/ui/resizable";

export default function Example() {
  return (
    <div style={{ height: 200 }}>
      <Resizable
        label="Resize sidebar"
        defaultSize={30}
        min={20}
        max={50}
        first={<nav>Files</nav>}
        second={<main>Editor</main>}
      />
    </div>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

HTML

<div style="height:200px">
  <div class="ml-resizable" data-direction="horizontal" data-anchor="first" style="--ml-resizable-size:30%">
    <div class="ml-resizable-pane"><nav>Files</nav></div>
    <div class="ml-resizable-handle" role="separator" tabindex="0" aria-label="Resize sidebar" aria-orientation="vertical" aria-valuemin="20" aria-valuemax="50" aria-valuenow="30"></div>
    <div class="ml-resizable-pane"><main>Editor</main></div>
  </div>
</div>

Options

Prop	Values	Default	Description
`anchor`	`firstsecond`	`first`	Which pane holds the size; the other takes the rest. A right-hand inspector anchors "second".
`direction`	`horizontalvertical`	`horizontal`	"horizontal" puts the panes side by side.
`units`	`percentpixels`	`percent`	"percent" of the whole, or "pixels" for panes that should keep their width as the window grows.

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-resizable`	`data-anchor="second"data-direction="horizontal \| vertical"`
`ml-resizable-pane`	`data-folded`
`ml-resizable-handle`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview