Resizable

The Resizable components provide a way to create adjustable panel layouts where users can resize panels by dragging. Built on react-resizable-panels, these components support both horizontal and vertical layouts.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Left Panel</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Right Panel</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Component Variants

ResizablePanelGroup

The root component that contains resizable panels.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={50}>Panel 1</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>Panel 2</ResizablePanel>
  </ResizablePanelGroup>
</div>

Prop	Type	Default
`ResizablePanelGroup`	`React.ComponentProps<typeof ResizablePrimitive.PanelGroup>`	-
`ResizablePanel`	`React.ComponentProps<typeof ResizablePrimitive.Panel>`	-
`ResizableHandle?`	`React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & VariantProps`	-

ResizableHandle Props

Prop	Type	Default
`withHandle?`	`boolean`	`false`
`noBorder?`	`boolean`	`true`
`size?`	`"sm" \| "md" \| "lg"`	`"sm"`
`icon?`	`React.ReactNode`	`EllipsisVerticalIcon`
`className?`	`string`	`undefined`

Usage

Horizontal Layout

Create a horizontal resizable layout.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Left</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Right</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Vertical Layout

Create a vertical resizable layout.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="vertical">
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Top</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Bottom</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

With Visible Handle

Show a visible handle icon for better UX.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Left</div>
    </ResizablePanel>
    <ResizableHandle withHandle={true} />
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Right</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Multiple Panels

Create layouts with multiple panels.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={33}>
      <div className="h-full p-4 bg-muted">Panel 1</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={33}>
      <div className="h-full p-4 bg-muted">Panel 2</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={34}>
      <div className="h-full p-4 bg-muted">Panel 3</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Custom Handle Styling

Customize the handle appearance.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@pipecat-ai/voice-ui-kit";

<div className="h-64 border rounded-lg">
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Left</div>
    </ResizablePanel>
    <ResizableHandle 
      withHandle={true} 
      size="lg" 
      noBorder={false}
    />
    <ResizablePanel defaultSize={50}>
      <div className="h-full p-4 bg-muted">Right</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Layout Directions

Horizontal: Panels are arranged side-by-side, handles are vertical
Vertical: Panels are stacked vertically, handles are horizontal

Handle Sizes

The handle icon supports three sizes:

sm: Small (size-3)
md: Medium (size-4)
lg: Large (size-5)

Integration

The Resizable components are built on react-resizable-panels and:

Disable global cursor styles for better UX
Use theme colors for borders and hover states
Support custom icons via the icon prop
Automatically adjust cursor based on direction (row-resize vs col-resize)

These components are useful for:

Code editors with sidebars
Dashboard layouts
Split-pane interfaces
Adjustable content areas

On this page