Github
Docs
Resizable

Resizable

A component that divides your interface into resizable sections.

A
B
C

Installation

npx shadcn-solid@latest add resizable

Usage

import { Resizable, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
<Resizable>
  <ResizablePanel>A</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>B</ResizablePanel>
</Resizable>

Examples

Vertical

Use the orientation prop to set the orientation of the resizable panels.

A
B

Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

A
B