Resizable

Understanding the Resizable Component

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

Setting Up the Resizable Component

npx shadcn@latest add resizable

Implementing the Resizable Component

  ResizableHandle, // Represents the draggable handle between panels
  ResizablePanel, // Defines a single resizable panel within a group
  ResizablePanelGroup, // A container for managing a group of resizable panels
} from "@/components/ui/resizable";

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

Practical Examples and Implementations

Vertical

Utilize the direction prop to specify the orientation of the resizable panels within the group, allowing for either horizontal or vertical layouts.

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

export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  );
}

Customizing the Resizable Handle Appearance

Control the visibility and appearance of the draggable handle by employing the withHandle prop on the ResizableHandle component.

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>
  );
}