Resizable

Accessible resizable panel groups and layouts with keyboard support.

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

About

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

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Resizable
Copy

Usage

Copy<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

Handle

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

@react.component
let make = () =>
  <Resizable

API Reference

See the react-resizable-panels documentation.