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