Resizable

A component that divides your interface into resizable sections.

Docs API Reference

Component resizable-demo not found in registry.

Installation

Copy and paste the following code into your project:

Usage

import {
  Resizable,
  ResizableHandle,
  ResizablePanel,
} from "@components/ui/resizable"
<Resizable>
  <ResizablePanel />
  <ResizableHandle />
  <ResizablePanel />
</Resizable>

Examples

Orientation

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

Component resizable-orientation-demo not found in registry.

import {
  Resizable,
  ResizableHandle,
  ResizablePanel,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <Resizable orientation="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </Resizable>
  )
}

With Handle

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

Component resizable-with-handle-demo not found in registry.

import {
  Resizable,
  ResizableHandle,
  ResizablePanel,
} from "@/components/ui/resizable"
 
export default function Example() {
  return (
    <Resizable>
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </Resizable>
  )
}
Radio GroupSearch