ResizablePane
Accessible, draggable panels for resizable layouts.
Installation
npx vayu-ui-cli@latest add resizable-paneUsage
Horizontal
Sidebar
Drag the handle →
Dashboard
Drag the handle →
Horizontal
Sidebar
Drag the handle →
Top Panel
Bottom Panel
Vertical
Top Panel
Bottom Panel
Three panels
Nav
Content
Aside
Anatomy
<ResizablePane>
<ResizablePane.Panel />
<ResizablePane.Handle />
<ResizablePane.Panel />
</ResizablePane>Accessibility
- Full keyboard support (
Arrow,Shift,Home,Endkeys) - ARIA attributes (
role="separator",aria-orientation,aria-valuenow,aria-valuemin,aria-valuemax,aria-label) - Focus behavior with clear visible rings conforming to WCAG 2.4.7
Screen reader behavior
- Announces as a "separator" pointing out the orientation.
- Reads out current, minimum, and maximum percent values during interaction.
- Describes the purpose of handle via
aria-label.
Component Folder Structure
ResizablePane/
├── index.ts
├── types.ts
├── ResizablePane.tsx
├── ResizablePaneHandle.tsx
├── ResizablePanel.tsx
└── README.mdProps
ResizablePane
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | "horizontal" | Direction of the resizable panels layout. |
children | React.ReactNode | - | Contains panels and handles. |
ResizablePane.Panel
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | 50 | Initial percentage size of the panel. |
minSize | number | 10 | Minimum percentage size. |
maxSize | number | 90 | Maximum percentage size. |
children | React.ReactNode | - | The content inside the panel. |
ResizablePane.Handle
| Prop | Type | Default | Description |
|---|---|---|---|
step | number | 2 | Percentage amount the size changes per keyboard arrow press. |