Resizable

Accessible resizable panel groups and layouts with keyboard support.

@react.component
let make = () =>
  <Resizable orientation=Horizontal className="max-w-sm rounded-lg border">

About

The Resizable component is built on top of react-resizable-panels by bvaughn.

Installation

npx shadcn@latest add @rescript-shadcn/Resizable

Usage

<Resizable orientation=Horizontal>
  <Resizable.Panel> {"One"->React.string} </Resizable.Panel>
  <Resizable.Handle />
  <Resizable.Panel> {"Two"->React.string} </Resizable.Panel>
</Resizable>

Examples

Vertical

Use orientation="vertical" for vertical resizing.

@react.component
let make = () =>
  <Resizable orientation=Vertical className="min-h-[200px] max-w-sm rounded-lg border">

Handle

Use the withHandle prop on ResizableHandle to show a visible handle.

@react.component
let make = () =>
  <Resizable orientation=Horizontal className="min-h-[200px] max-w-sm rounded-lg border">

API Reference

See the react-resizable-panels documentation.