Sections
Installation
Components
One
Two
Three
import {
ResizableHandle,
ResizablePanel,About#
The Resizable component is built on top of react-resizable-panels by bvaughn.
Installation#
pnpm dlx shadcn@latest add https://retroui.dev/r/base/resizable.json
Usage#
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>Composition#
Use the following composition to build a ResizablePanelGroup:
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanelExamples#
Vertical#
Use orientation="vertical" for vertical resizing.
Header
Content
import {
ResizableHandle,
ResizablePanel,Handle#
Use the withHandle prop on ResizableHandle to show a visible handle.
Sidebar
Content
import {
ResizableHandle,
ResizablePanel,RTL#
To enable RTL support in RetroUI, see the RTL configuration guide.
واحد
اثنان
ثلاثة
"use client"
import * as React from "react"API Reference#
See the react-resizable-panels documentation.
Changelog#
2025-02-02 react-resizable-panels v4#
Updated to react-resizable-panels v4. See the v4.0.0 release notes for full details.
If you're using react-resizable-panels primitives directly, note the following changes:
| v3 | v4 |
|---|---|
PanelGroup | Group |
PanelResizeHandle | Separator |
direction prop | orientation prop |
defaultSize={50} | defaultSize="50%" |
onLayout | onLayoutChange |
ImperativePanelHandle | PanelImperativeHandle |
ref prop on Panel | panelRef prop |
data-panel-group-direction | aria-orientation |
The RetroUI wrapper components (ResizablePanelGroup, ResizablePanel,
ResizableHandle) remain unchanged.