resizable

Accessible resizable panel groups and layouts with keyboard support.

DocsAPI Reference
One
Two
Three

About

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

Installation

npx @gentleduck/cli  add resizable
npx @gentleduck/cli  add resizable

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
<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
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

Handle

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

Sidebar
Content
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

API Reference

ResizablePanelGroup

  • props (React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): Native props forwarded to the underlying PanelGroup component.

Behavior:

  • Wraps react-resizable-panels's PanelGroup component.
  • Defaults to horizontal layout but supports vertical via data attributes.
  • Provides a flexible container that manages resizable panels.

ResizablePanel

  • All native props from react-resizable-panels's Panel.

Behavior:

  • Represents a single resizable panel inside a ResizablePanelGroup.
  • Resizes according to user interaction with ResizableHandle.

ResizableHandle

  • withHandle (boolean, optional, default: false): Whether to render the visible handle UI (grip icon).
  • ...props (React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>): Native props forwarded to the underlying resize handle.

Behavior:

  • Wraps PanelResizeHandle from react-resizable-panels.
  • Displays a thin draggable bar between panels.
  • If withHandle is true, renders a small grip icon (GripVertical) for better affordance.
  • Supports keyboard focus styling and accessibility.
Radio GroupScroll Area