# Gummy Resizable

> A bounded two-panel split with pointer and keyboard control.

- Status: stable
- Licence: MIT
- Catalogue group: Data and utilities

## Installation

```sh
npx shadcn@latest add https://gummyui.dev/r/gummy-resizable.json
```

The shadcn-compatible registry copies editable React, TypeScript, and CSS
into the consuming application; it is not a black-box component runtime.

## Semantics

A focusable separator exposes orientation and current/min/max values.

## Keyboard behavior

Arrows resize; Shift accelerates; Home/End use the bounds.

## Dependencies

No component-specific dependency is declared in the catalogue.
The registry resolves shared Gummy style payloads automatically.

## Anatomy and API

Exported React parts:

- `GummyResizableHandle`
- `GummyResizablePanel`
- `GummyResizablePanelGroup`

### `GummyResizableHandleProps`

Composes `React.HTMLAttributes<HTMLDivElement> & { label?: string; step?: number; }`.

### `GummyResizablePanelGroupProps`

Composes `Omit< React.HTMLAttributes<HTMLDivElement>, "onChange" | "dir" > & { orientation?: "horizontal" | "vertical"; direction?: "ltr" | "rtl"; size?: number; defaultSize?: number; minSize?: number; maxSize?: number; onSizeChange?: (size: number) => void; }`.

### `GummyResizablePanelProps`

Composes `React.HTMLAttributes<HTMLDivElement> & { order: "first" | "second"; }`.

## Themes, RTL, and reduced motion

- Light and dark modes use the shared semantic and fruit tokens. Set
  `data-theme="dark"` on the root to activate the included dark environment.
- Use the nearest genuine `dir` boundary. Layout uses logical properties;
  any directional key behavior is part of the keyboard contract above.
- Gummy motion styles honor `prefers-reduced-motion: reduce`; preserve visible
  focus, selection, loading, and validation information when motion is reduced.

## Public source and registry

- [Source viewer](https://gummyui.dev/components/resizable#source-title)
- Public source path: `app/components/ui/GummyResizable.tsx`
- [Registry payload](https://gummyui.dev/r/gummy-resizable.json)
- [HTML documentation](https://gummyui.dev/components/resizable)

## Licence and source boundary

Gummy UI's public component source and documentation are MIT licensed.
This Markdown namespace exposes only public catalogue facts, public source
locations, and public registry URLs. Separate paid assets are not included
and cannot be inferred from these documents.

Canonical Markdown: https://gummyui.dev/docs/markdown/components/resizable.md