ResizablePane

Installation

npx vayu-ui init #one time only

npx vayu-ui add resizablepane

npx vayu-ui add -t resizablepane #with test case needs

Usage

Horizontal

Sidebar

Drag the handle →

Main Content

Resizable panel with min 30%

Vertical

Top Panel

Bottom Panel

Three panels

Nav

Content

Aside

<ResizablePane direction="horizontal">
  <ResizablePane.Panel defaultSize={30} minSize={15} maxSize={50}>
    <div>Sidebar</div>
  </ResizablePane.Panel>
  <ResizablePane.Handle />
  <ResizablePane.Panel defaultSize={70}>
    <div>Main Content</div>
  </ResizablePane.Panel>
</ResizablePane>

<ResizablePane direction="vertical">
  <ResizablePane.Panel defaultSize={50} minSize={20}>
    <div>Top Section</div>
  </ResizablePane.Panel>
  <ResizablePane.Handle step={5} />
  <ResizablePane.Panel defaultSize={50} minSize={20}>
    <div>Bottom Section</div>
  </ResizablePane.Panel>
</ResizablePane>

Anatomy

<ResizablePane>
  <ResizablePane.Panel />
  <ResizablePane.Handle />
  <ResizablePane.Panel />
</ResizablePane>

Accessibility

Full keyboard support (Arrow, Shift, Home, End keys)
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

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.md

Props

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.

ResizablePane

On this page