Resizable

Accessible resizable panel groups and layouts with keyboard support.

Radix UI Base UI

One

Two

Three

About

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

Installation

Radio Group Scroll Area

On This Page

About Installation Usage Examples Vertical Handle API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add resizable

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

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

Use direction="vertical" for vertical resizing.

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

import {
  ResizableHandle,
  ResizablePanel,

import {
  ResizableHandle,
  ResizablePanel,

import {
  ResizableHandle,
  ResizablePanel,