Layout

Resizable

Split panes — panels side by side (or stacked) with draggable, keyboard-operable boundaries between them. The editor/preview layout, the sidebar you can widen, the inspector you can shrink.

Client component3 exportsSource

Import

import { Resizable, ResizableHandle, ResizablePanel } from '@the_viveksingh/vivek-ui'

Editor and sidebar

Each handle is a role="separator" with a value: aria-valuenow is the share of the panel before it, arrows move it by step percent (Shift x 5), Home/End go to the limits, Enter or a double-click resets. Dragging uses pointer capture. Shares always sum to 100 and are remembered per storageKey.

Files

Drag the bar, or focus it and use the arrow keys. Shift moves five steps; Home and End go to the limits; Enter or a double-click resets.

Editor

Panels nest. This one is split top and bottom; the split is remembered per storageKey.

$ pnpm test — 2042 passed

<Resizable defaultSizes={[25, 75]} storageKey="workspace-split">
  <Resizable.Panel minSize={15} maxSize={50}>
    <FileTree nodes={files} label="Files" />
  </Resizable.Panel>
  <Resizable.Handle label="Resize the file list" />
  <Resizable.Panel>
    <Editor />
  </Resizable.Panel>
</Resizable>

Nested and controlled

orientation="vertical" stacks panels; a Resizable inside a panel nests. sizes / onSizesChange make it controlled - here the terminal share is kept in state so a "Hide terminal" button can set it to its minimum.

Files

Drag the bar, or focus it and use the arrow keys. Shift moves five steps; Home and End go to the limits; Enter or a double-click resets.

Editor

Panels nest. This one is split top and bottom; the split is remembered per storageKey.

$ pnpm test — 2042 passed

<Resizable orientation="vertical" sizes={split} onSizesChange={setSplit}>
  <Resizable.Panel minSize={30}>
    <Editor />
  </Resizable.Panel>
  <Resizable.Handle label="Resize the terminal" />
  <Resizable.Panel minSize={10}>
    <Terminal />
  </Resizable.Panel>
</Resizable>

<Button variant="ghost" onClick={() => setSplit([90, 10])}>Hide terminal</Button>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Resizable
PropTypeDefaultDescription
orientationResizableOrientation—`horizontal` lays panels side by side (the default); `vertical` stacks them.
sizesnumber[]—Controlled panel shares, in percent. Normalised to sum to 100.
defaultSizesnumber[]—Initial shares. Default: an equal split.
onSizesChange(sizes: number[]) => void——
stepnumber—Percent moved per arrow key. Shift multiplies by five. Default `2`.
storageKeystring—Persist the layout in `localStorage` under this key.
childrenReactNode——

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

ResizableResizableHandleResizablePanel

Rendering