Resizable

Installation

›pnpm dlx shadcn@latest add @evolphin/resizable

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Type Definitions

interface ResizablePanelGroupProps {
  /** The direction of the panel group */
  direction: "horizontal" | "vertical";    
ResizablePanelGroupProps.direction: "horizontal" | "vertical"
The direction of the panel group
}

Examples

Default

One

Two

Three

Vertical

Header

Content

Handle

Sidebar

Content

API Reference

ResizablePanelGroup

Prop	Type	Default	Description
`direction`	`"horizontal" \	"vertical"`	-
`className`	`string`	-	Additional CSS classes

ResizablePanel

Prop	Type	Default	Description
`defaultSize`	`number`	-	The default size of the panel in percentage.
`minSize`	`number`	-	The minimum size of the panel in percentage.
`maxSize`	`number`	-	The maximum size of the panel in percentage.
`className`	`string`	-	Additional CSS classes

ResizableHandle

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	Whether to show a visual handle icon.
`className`	`string`	-	Additional CSS classes

Search

On this page