Resizable

Installation#

1. Install the dependencies

   npm install cn react-resizable-panels

2. Copy the source into your project

   components/ui/resizable.tsx

   "use client"import { cn } from "cn"import * as ResizablePrimitive from "react-resizable-panels"function ResizablePanelGroup({  className,  ...props}: ResizablePrimitive.GroupProps) {  return (    <ResizablePrimitive.Group      data-slot="resizable-panel-group"      className={cn(        "flex h-full w-full aria-[orientation=vertical]:flex-col",        className      )}      {...props}    />  )}function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />}function ResizableHandle({  withHandle,  className,  ...props}: ResizablePrimitive.SeparatorProps & {  withHandle?: boolean}) {  return (    <ResizablePrimitive.Separator      data-slot="resizable-handle"      className={cn(        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",        className      )}      {...props}    >      {withHandle && (        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />      )}    </ResizablePrimitive.Separator>  )}export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#