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

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

# ResizablePanel

**Type**: component

Individual resizable panel within a panel group with size constraints and callbacks ResizablePanel represents a single resizable section within a ResizablePanelGroup. Supports flexible sizing constraints, collapse/expand behavior, and programmatic control through imperative API. Each panel automatically handles content overflow and maintains accessibility during resize operations with proper focus and scroll management.

## JSX Usage

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

<ResizablePanel
  id="value"
  order={0}
  defaultSize={0}
  minSize={0}
  maxSize={0}
  collapsible={true}
  collapsedSize={0}
  onCollapse={handleCollapse}
  onExpand={handleExpand}
  onResize={handleResize}
  tagName={value}
  className="value"
  style={value}
>
  {/* Your content here */}
</ResizablePanel>
```

## Component Props

### id
- **Type**: `string`
- **Required**: No
- **Description**: Unique identifier for programmatic control and conditional rendering

### order
- **Type**: `number`
- **Required**: No
- **Description**: Display order within group, important when panels are conditionally rendered

### defaultSize
- **Type**: `number`
- **Required**: No
- **Description**: Initial size as percentage (0-100) when panel first mounts

### minSize
- **Type**: `number`
- **Required**: No
- **Description**: Minimum size constraint as percentage (0-100)

### maxSize
- **Type**: `number`
- **Required**: No
- **Description**: Maximum size constraint as percentage (0-100)

### collapsible
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether panel can collapse beyond minSize to collapsedSize

### collapsedSize
- **Type**: `number`
- **Required**: No
- **Description**: Size when fully collapsed, must be between 0 and minSize

### onCollapse
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when panel collapses to minimum size

### onExpand
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when panel expands from collapsed state

### onResize
- **Type**: `(size: number, prevSize: number | undefined) => void`
- **Required**: No
- **Description**: Callback fired during resize with current and previous sizes

### 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**: Panel content elements

## Examples

### Example 1
```tsx
// Basic panel with default size
<ResizablePanel defaultSize={50}>
  <div className="p-4">Panel content</div>
</ResizablePanel>
```
### Example 2
```tsx
// Panel with size constraints and callbacks
<ResizablePanel
  id="sidebar"
  defaultSize={30}
  minSize={20}
  maxSize={60}
  collapsible
  onCollapse={() => console.log('Sidebar collapsed')}
  onExpand={() => console.log('Sidebar expanded')}
  onResize={(size, prevSize) => console.log(`Resized from ${prevSize}% to ${size}%`)}
>
  <aside className="p-4">Collapsible sidebar content</aside>
</ResizablePanel>
```
### Example 3
```tsx
// Panel with conditional rendering support
<ResizablePanel
  id="dynamic-panel"
  order={1}
  defaultSize={40}
  collapsible
  collapsedSize={5}
>
  {isExpanded ? <FullContent /> : <CollapsedView />}
</ResizablePanel>
```
### Example 4
```tsx
// Panel with imperative control via ref
function PanelWithControl() {
  const panelRef = useRef<ImperativePanelHandle>(null);
  return (
    <>
      <button onClick={() => panelRef.current?.collapse()}>
        Collapse Panel
      </button>
      <ResizablePanel ref={panelRef} defaultSize={50} collapsible>
        <div>Controlled panel content</div>
      </ResizablePanel>
    </>
  );
}
```