Docs
Resizable

Resizable

Accessible resizable panel groups and layouts with keyboard support.

DocsAPI Reference
One
Two
Three

Vertical

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

Header
Content

Handle

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

Sidebar
Content

About

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

Installation

Install the following dependencies:

npm install react-resizable-panels

Copy and paste the following code into your project.

"use client"
 
import { DragHandleDots2Icon } from "@radix-ui/react-icons"
import * as ResizablePrimitive from "react-resizable-panels"
 
import { cn } from "@/lib/utils"
 
const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex size-full data-[panel-group-direction=vertical]:flex-col border-2 border-black shadow-[4px_4px_0_0_#000] transition-all dark:hover:shadow-none hover:shadow-none dark:border-white dark:bg-zinc-800 dark:shadow-[4px_4px_0_0_#fff]",
      className
    )}
    {...props}
  />
)
 
const ResizablePanel = ResizablePrimitive.Panel
 
const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center border-2 border-black dark:border-white justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <DragHandleDots2Icon className="size-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)
 
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

Copy and paste the following code into your project.