Resizable

A set of components for creating resizable panel layouts.

Usage

import { ResizablePanelGroup } from "@rhinolabs/ui"

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
      <ResizablePanelGroup.Panel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Panel 1</span>
        </div>
      </ResizablePanelGroup.Panel>
      <ResizablePanelGroup.Handle />
      <ResizablePanelGroup.Panel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Panel 2</span>
        </div>
      </ResizablePanelGroup.Panel>
    </ResizablePanelGroup>
  )
}

Examples

Horizontal Layout

A basic horizontal resizable layout.

<ResizablePanelGroup direction="horizontal" className="min-h-[200px] rounded-lg border">
  <ResizablePanelGroup.Panel defaultSize={25}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanelGroup.Panel>
  <ResizablePanelGroup.Handle withHandle />
  <ResizablePanelGroup.Panel defaultSize={75}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanelGroup.Panel>
</ResizablePanelGroup>

Vertical Layout

A vertical resizable layout.

<ResizablePanelGroup direction="vertical" className="min-h-[400px] rounded-lg border">
  <ResizablePanelGroup.Panel defaultSize={25}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Top Panel</span>
    </div>
  </ResizablePanelGroup.Panel>
  <ResizablePanelGroup.Handle withHandle />
  <ResizablePanelGroup.Panel defaultSize={75}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Bottom Panel</span>
    </div>
  </ResizablePanelGroup.Panel>
</ResizablePanelGroup>

Props

ResizablePanelGroup

Prop	Type	Default	Description
direction	"horizontal" | "vertical"	"horizontal"	Layout direction
onLayout	(sizes: number[]) => void	-	Layout change callback

ResizablePanel

Prop	Type	Default	Description
defaultSize	number	-	Default panel size (0-100)
minSize	number	0	Minimum panel size
maxSize	number	100	Maximum panel size

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	false	Show drag handle

Design Considerations

• Set appropriate min/max sizes
• Provide visual feedback
• Consider content overflow
• Maintain responsive behavior
• Handle edge cases

Accessibility

• Supports keyboard navigation
• Maintains focus states
• Provides visual feedback
• Handles drag interactions
• Supports screen readers