---
url: "https://vueda.dev/v3/reference/theming/keys/ResizableHandle.md"
title: "ResizableHandle"
---

# ResizableHandle

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups.

Vue component: [ResizableHandle](/v3/reference/api/vue/ResizableHandle.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ResizableHandle.md#theme-key-ResizableHandle-root) | 4 classes | The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups. |
| [handle](/v3/reference/theming/keys/ResizableHandle.md#theme-key-ResizableHandle-handle) | `bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs hairline hairline-border` | The visible grip inside a resizable handle. It gives pointer users a small bordered target without changing the panel separator's actual layout width. |

<a id="theme-key-ResizableHandle-root"></a>

## root

> The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups.

Default classes:

```text
bg-border relative flex w-hairline items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2
focus-visible:focus-ring
data-[orientation=vertical]:h-hairline data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0
[&[data-orientation=vertical]>div]:rotate-90
```

Source: `client/lib/theme/vueda-tailwind/shell/ResizableHandle.theme.js:18`

<a id="theme-key-ResizableHandle-handle"></a>

## handle

> The visible grip inside a resizable handle. It gives pointer users a small bordered target without changing the panel separator's actual layout width.

Default classes:

`bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs hairline hairline-border`

Source: `client/lib/theme/vueda-tailwind/shell/ResizableHandle.theme.js:36`