# Resizable · JGuang UI

> Accessible resizable panel groups and layouts with keyboard support.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/resizable
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `resizable-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/resizable


## About

The `Resizable` component is built on top of [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn).

## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install react-resizable-panels
```


### Copy and paste the following code into your project.


[View complete source: components/ui/resizable.tsx](/r/jguang-ui/base/resizable.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
```

```tsx showLineNumbers
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
```

## Composition

Use the following composition to build a `ResizablePanelGroup`:

```text
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel
```

## Vertical

Use `orientation="vertical"` for vertical resizing.


> Example `resizable-vertical`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/resizable


## Handle

Use the `withHandle` prop on `ResizableHandle` to show a visible handle.


> Example `resizable-handle`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/resizable


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `resizable-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/resizable


## API Reference

See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/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](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) 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 JGuang UI wrapper components (`ResizablePanelGroup`, `ResizablePanel`,
  `ResizableHandle`) remain unchanged.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt