WFP logoDesign System
Components

Resizable

View on shadcn/ui

Accessible resizable panel groups and layouts with keyboard support.

One
Two
Three

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/resizable.json

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

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

Header
Content

Handle

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

Sidebar
Content

On this page

InstallationUsageExamplesVerticalHandle