Preview

Installation

npx sigma-ui@latest add resizable

Usage

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable';
</script>

<template>
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

• defaultSize, minSize, and maxSize on ResizablePanel are percentages of the group.
• Set auto-save-id on ResizablePanelGroup to persist the layout in local storage.

Examples

Vertical

Use the direction prop to set the direction of the resizable panels.

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable';
</script>

<template>
  <ResizablePanelGroup direction="vertical">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable';
</script>

<template>
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle with-handle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

API Reference

ResizablePanelGroup

Props

Prop	Type	Default
id Group id; falls back to useId when not provided.	string | null	-
autoSaveId Unique id used to auto-save group arrangement via localStorage.	string | null	-
directionrequired The group orientation of splitter.	Direction$1	-
keyboardResizeBy Step size when arrow key was pressed.	number | null	-
storage Custom storage API; defaults to localStorage	PanelGroupStorage	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
layout Event handler called when group layout changes	[val: number[]]

Slots

Slot	Scope
default The content of the component.	-

ResizableHandle

Props

Prop	Type	Default
id Resize handle id (unique within group); falls back to useId when not provided	string	-
hitAreaMargins Allow this much margin when determining resizable handle hit detection	PointerHitAreaMargins	-
tabindex Tabindex for the handle	number	-
disabled Disable drag handle	boolean	-
nonce Will add nonce attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from ConfigProvider.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
withHandle Shows a visible grip icon on the handle.	boolean	-

Events

Event	Payload
dragging Event handler called when dragging the handler.	[isDragging: boolean]

Accessibility

Adheres to the Window Splitter WAI-ARIA design pattern. Reka UI handles the roles, ARIA attributes, and keyboard interactions of the handle.

Key	Description
Tab	Moves focus to the next handle or focusable element.
Enter	If the primary panel is not collapsed, collapses it. If it is collapsed, restores the handle to its previous position.
ArrowDown	Moves a horizontal handle down.
ArrowUp	Moves a horizontal handle up.
ArrowRight	Moves a vertical handle to the right.
ArrowLeft	Moves a vertical handle to the left.
Home	Moves the handle to give the primary panel its smallest allowed size.
End	Moves the handle to give the primary panel its largest allowed size.