Resizable
Let users allocate space between adjacent panels with an accessible separator.
Use ResizablePanelGroup when two related work areas need user controlled space, such as a list beside a detail view.
Built on react-resizable-panelsUpstream API
Work order details
Drag the handle to give the active job more room while keeping its context nearby.
Customer history
Service history and contact notes stay available beside the work order.
Primary panel: 58%
Import
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@workshop1/ui/components/resizable"Accessibility
The separator exposes its orientation and keyboard resize behavior. Keep useful minimum sizes so either panel remains usable after resizing.
Best practices
- Set minimum sizes for both panels.
- Use a visible handle when the resize affordance needs extra emphasis.
- Keep the two panels related so resizing one improves the same task.