@neynar/ui/llm-docs/resizable-panel-group.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ResizablePanelGroup

**Type**: component

Container for creating resizable panel groups with full keyboard accessibility ResizablePanelGroup provides a flexible container for organizing multiple resizable panels that can be resized by dragging handles between them or using keyboard navigation. Built on react-resizable-panels with enhanced styling, accessibility, and persistence features. Supports both horizontal and vertical layouts with automatic layout saving and restoration.

## JSX Usage

```jsx
import { ResizablePanelGroup } from '@neynar/ui';

<ResizablePanelGroup
  direction={value}
  autoSaveId={value}
  id={value}
  keyboardResizeBy={value}
  onLayout={handleLayout}
  storage={value}
  dir={value}
  tagName={value}
  className="value"
  style={value}
>
  {/* Your content here */}
</ResizablePanelGroup>
```

## Component Props

### direction
- **Type**: `"horizontal" | "vertical"`
- **Required**: Yes
- **Description**: Layout direction: "horizontal" for side-by-side, "vertical" for top-to-bottom

### autoSaveId
- **Type**: `string | null`
- **Required**: No
- **Description**: Unique identifier for automatically saving/restoring panel layouts

### id
- **Type**: `string | null`
- **Required**: No
- **Description**: No description available

### keyboardResizeBy
- **Type**: `number | null`
- **Required**: No
- **Description**: Increment in percentage points for keyboard-based resizing

### onLayout
- **Type**: `(layout: number[]) => void`
- **Required**: No
- **Description**: Callback fired when panel sizes change, receives array of percentages

### storage
- **Type**: `{
    getItem(name: string): string | null;
    setItem(name: string, value: string): void;
  }`
- **Required**: No
- **Description**: Custom storage implementation for layout persistence (defaults to localStorage)

### dir
- **Type**: `"auto" | "ltr" | "rtl"`
- **Required**: No
- **Description**: Text direction for RTL/LTR layout support

### tagName
- **Type**: `keyof React.JSX.IntrinsicElements`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for custom styling

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: ResizablePanel and ResizableHandle components

## Examples

### Example 1
```tsx
// Basic horizontal layout
<ResizablePanelGroup direction="horizontal" className="h-full">
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Left panel content</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Right panel content</div>
  </ResizablePanel>
</ResizablePanelGroup>
```
### Example 2
```tsx
// Vertical layout with visual handles
<ResizablePanelGroup direction="vertical" className="min-h-[400px]">
  <ResizablePanel defaultSize={30}>
    <header className="p-4">Header content</header>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={70}>
    <main className="p-4">Main content area</main>
  </ResizablePanel>
</ResizablePanelGroup>
```
### Example 3
```tsx
// Persistent layout with auto-save
<ResizablePanelGroup
  direction="horizontal"
  autoSaveId="main-layout"
  onLayout={(sizes) => console.log('Layout changed:', sizes)}
>
  <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
    <nav>Sidebar (20-40%)</nav>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={75} minSize={60}>
    <main>Content area (min 60%)</main>
  </ResizablePanel>
</ResizablePanelGroup>
```
### Example 4
```tsx
// Custom keyboard resize increment
<ResizablePanelGroup
  direction="horizontal"
  keyboardResizeBy={5}
  dir="ltr"
>
  <ResizablePanel defaultSize={50} id="left-panel">
    <div>Panel content</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50} id="right-panel">
    <div>Panel content</div>
  </ResizablePanel>
</ResizablePanelGroup>
```