Resizable
LayoutStable
Resizable panels with drag handles built on react-resizable-panels. Supports horizontal and vertical layouts.
Quick Import
import { Resizable } from "@cohere-ai/waypoint-ui/resizable";Live Preview
Loading Resizable...
Props
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | Resize axis (on ResizablePanelGroup) |
withHandle | boolean | - | Shows visual grip indicator (on ResizableHandle) |
Examples
Horizontal Resizable Panels
Two panels that can be resized horizontally
1 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@cohere-ai/waypoint-ui/resizable'; 2 3 <ResizablePanelGroup direction="horizontal" className="h-64 rounded-lg border"> 4 <ResizablePanel defaultSize={50}> 5 <div className="flex h-full items-center justify-center p-4">Panel 1</div> 6 </ResizablePanel> 7 <ResizableHandle withHandle /> 8 <ResizablePanel defaultSize={50}> 9 <div className="flex h-full items-center justify-center p-4">Panel 2</div> 10 </ResizablePanel> 11 </ResizablePanelGroup>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Resizable component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.