Resizable

Accessible resizable panel groups and layouts with keyboard support.

One

Two

tsx

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

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Installation

CLI

bash

npx fivui add resizable

Manual

Install the following dependencies:

bash

npm install react-resizable-panels

Usage

tsx

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

tsx

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>A</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>B</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

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

Vertical Layout

Resizable panels stacked vertically

Header

Content

tsx

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

export function ResizableVertical() {
  return (
    <ResizablePanelGroup
      direction="vertical"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={25}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Header</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Nested

You can nest resizable panel groups to create complex layouts.

Nested Panels

Complex layout with nested resizable panels

Sidebar

Header

Content

tsx

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

export function ResizableNested() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={25}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={25}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Header</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Content</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

API Reference

ResizablePanelGroup

Contains resizable panels and handles.

Prop	Type	Default	Description
`direction`	`horizontal \| vertical`	horizontal	The direction of the resizable panels.
`onLayout`	`function`	-	Called when the layout changes.

ResizablePanel

Individual resizable panel within a group.

Prop	Type	Default	Description
`defaultSize`	`number`	-	Initial size of the panel (0-100).
`minSize`	`number`	10	Minimum size of the panel (0-100).
`maxSize`	`number`	90	Maximum size of the panel (0-100).
`collapsible`	`boolean`	false	Whether the panel can be collapsed.

ResizableHandle

Handle for resizing panels.

Prop	Type	Default	Description
`disabled`	`boolean`	false	Whether the handle is disabled.

External Documentation

Resizable is built on top of react-resizable-panels. For more advanced usage and API details, refer to the official documentation.

View react-resizable-panels Documentation