## Overview [#overview]
The **Resizable** component provides a flexible system for creating resizable panel layouts. Built on [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels), it supports horizontal and vertical orientations, customizable handles, and flexible sizing constraints.
## Usage [#usage]
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@tilt-legal/cubitt-components/primitives";
```
```tsx
One
Two
```
## Examples [#examples]
### Vertical [#vertical]
Use `orientation="vertical"` to stack panels vertically.
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Header
Content
);
}
```
### With Handle [#with-handle]
Add `withHandle` to display a visible drag handle on the resize bar.
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
One
Two
);
}
```
### Custom Handle [#custom-handle]
Pass a custom React element to `withHandle` for full control over the handle appearance.
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Sidebar
}
className="!w-2 !bg-transparent"
/>
Content
);
}
```
### Pixel-Based Sizing [#pixel-based-sizing]
Use numeric values for pixel-based constraints. The second panel automatically fills remaining space.
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Fixed Sidebar (280px)
Flexible Content
);
}
```
***
## API Reference [#api-reference]
### ResizablePanelGroup [#resizablepanelgroup]
Container component that manages the resizable panel layout.
| Prop | Type | Default | Description |
| ---------------- | ---------------------------- | -------------- | ------------------------------------------- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the panel layout. |
| `onLayoutChange` | `(layout: Layout) => void` | — | Callback when panel sizes change. |
| `className` | `string` | — | Additional CSS classes for the panel group. |
### ResizablePanel [#resizablepanel]
Individual panel within the group.
Size props accept flexible units:
* **Numbers** are pixels (e.g., `defaultSize={420}` = 420px)
* **Strings without units** are percentages (e.g., `defaultSize="50"` = 50%)
* **Strings with units** use that unit (e.g., `"10rem"`, `"50vh"`)
| Prop | Type | Default | Description |
| --------------- | ------------------ | ------- | ----------------------------------------------- |
| `defaultSize` | `number \| string` | — | Initial size (pixels, percentage, or CSS unit). |
| `minSize` | `number \| string` | — | Minimum size constraint. |
| `maxSize` | `number \| string` | — | Maximum size constraint. |
| `collapsible` | `boolean` | `false` | Whether the panel can be collapsed. |
| `collapsedSize` | `number \| string` | — | Size when collapsed. |
| `onResize` | `(size) => void` | — | Callback when panel is resized. |
| `className` | `string` | — | Additional CSS classes for the panel. |
### ResizableHandle [#resizablehandle]
Draggable handle between panels.
| Prop | Type | Default | Description |
| ------------ | ---------------------------- | ------- | ------------------------------------------------------------------------- |
| `withHandle` | `boolean \| React.ReactNode` | `false` | Show a visible grip handle. Pass `true` for default, or a custom element. |
| `disabled` | `boolean` | `false` | Disable resizing via this handle. |
| `className` | `string` | — | Additional CSS classes for the handle. |
## Hooks [#hooks]
### useResizablePanelRef [#useresizablepanelref]
Get a ref to imperatively control a panel (collapse, expand, resize).
```tsx
import { useResizablePanelRef } from "@tilt-legal/cubitt-components/primitives";
function Component() {
const panelRef = useResizablePanelRef();
return (
Sidebar
Content
);
}
// Imperative methods:
panelRef.current?.collapse(); // Collapse the panel
panelRef.current?.expand(); // Expand the panel
panelRef.current?.isCollapsed(); // Check if collapsed
panelRef.current?.getSize(); // { asPercentage: number, inPixels: number }
```
### useResizableGroupRef [#useresizablegroupref]
Get a ref to imperatively control the entire group layout.
```tsx
import { useResizableGroupRef } from "@tilt-legal/cubitt-components/primitives";
function Component() {
const groupRef = useResizableGroupRef();
const resetLayout = () => {
groupRef.current?.setLayout({ left: 30, right: 70 });
};
return (
Left
Right
);
}
// Imperative methods:
groupRef.current?.getLayout(); // { [panelId]: percentage }
groupRef.current?.setLayout({ ... }); // Set new layout by panel IDs
```
### useResizableDefaultLayout [#useresizabledefaultlayout]
Persist and restore layouts to storage (localStorage, sessionStorage, or custom).
```tsx
import { useResizableDefaultLayout } from "@tilt-legal/cubitt-components/primitives";
function Component() {
const { defaultLayout } = useResizableDefaultLayout({
panelIds: ["sidebar", "content"],
storage: localStorage,
});
return (
Content
);
}
```
## Types [#types]
```tsx
import type {
ResizablePanelGroupHandle,
ResizablePanelHandle,
ResizableLayout,
ResizablePanelSize,
} from "@tilt-legal/cubitt-components/primitives";
```
## Credits [#credits]
Built with [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels).