Resizable

Accessible resizable panel groups and layouts with keyboard support.

Preview

Installation

npm install @matrix-ui/components

Usage

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@matrix-ui/components'

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>
    <div>Panel 1</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div>Panel 2</div>
  </ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical Layout

With Handle Grip

Three Panel Layout

Nested Layout