Docs
Resizable

Resizable

Accessible brutal retro resizable panel groups and layouts with keyboard support.

DocsAPI Reference
Loading...

Vertical

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

Loading...

Handle

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

Loading...

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 transition-all dark:border-white dark:bg-zinc-800",
      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.

ProgressScroll Area