Resizable
A resizable component that allows users to resize panels in a layout. Built with accessibility and keyboard support in mind using react-resizable-panels.
Sidebar
Main Content
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add resizableAnatomy
Import the component parts and combine them.
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup
} from "@/components/resizable";
export const ResizableExample = () => (
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
);Examples
Vertical
Set the orientation prop to vertical to create a vertical layout.
Header
Content
Visible Handle
Use the withHandle prop on ResizableHandle to show a more visible grabber.
Sidebar
Main Content
Nested
You can nest ResizablePanelGroup components to create complex layouts.
Sidebar
Top Content
Bottom Content
API Reference
ResizablePanelGroup
The main container for resizable panels.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | - | The direction of the panels. |
id | string | - | Unique ID for the panel group. |
storage | PanelGroupStorage | - | Custom storage for panel sizes. |
className | string | - | Additional CSS classes. |
ResizablePanel
A single panel within a group.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | - | The initial size of the panel (0-100). |
maxSize | number | - | The maximum size of the panel (0-100). |
minSize | number | - | The minimum size of the panel (0-100). |
collapsible | boolean | false | Whether the panel can be collapsed. |
onCollapse | () => void | - | Callback when the panel collapses. |
onExpand | () => void | - | Callback when the panel expands. |
onResize | (size: number) => void | - | Callback when the panel is resized. |
ResizableHandle
The separator between panels that users can drag.
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Shows a visible handle icon. |
disabled | boolean | false | Disables resizing. |
className | string | - | Additional CSS classes. |
Accessibility
- Full keyboard support for resizing using arrow keys.
- Home/End keys to quickly jump to min/max sizes.
- Proper ARIA attributes for screen readers.
- Focus management for handles.