# Floating Panel

URL: https://ark-ui.com/docs/components/floating-panel
LLM: https://ark-ui.com/llms.txt/components/floating-panel

Used to display content in a non-modal floating window.

---



## Anatomy



```tsx
<FloatingPanel.Root>
  <FloatingPanel.Trigger />
  <FloatingPanel.Positioner>
    <FloatingPanel.Content>
      <FloatingPanel.DragTrigger>
        <FloatingPanel.Header>
          <FloatingPanel.Title />
          <FloatingPanel.Control>
            <FloatingPanel.StageTrigger />
            <FloatingPanel.CloseTrigger />
          </FloatingPanel.Control>
        </FloatingPanel.Header>
      </FloatingPanel.DragTrigger>
      <FloatingPanel.Body />
      <FloatingPanel.ResizeTrigger />
    </FloatingPanel.Content>
  </FloatingPanel.Positioner>
</FloatingPanel.Root>
```

## Examples

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import styles from 'styles/floating-panel.module.css'

export const Basic = () => (
  <FloatingPanel.Root>
    <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner className={styles.Positioner}>
        <FloatingPanel.Content className={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header className={styles.Header}>
              <FloatingPanel.Title className={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control className={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body className={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </Portal>
  </FloatingPanel.Root>
)
```

### Controlled size

To control the size of the floating panel programmatically, you can pass the `size` `onResize` prop to the machine.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/floating-panel.module.css'

export const ControlledSize = () => {
  const [size, setSize] = useState({ width: 400, height: 300 })

  return (
    <FloatingPanel.Root size={size} onSizeChange={(e) => setSize(e.size)}>
      <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner className={styles.Positioner}>
          <FloatingPanel.Content className={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header className={styles.Header}>
                <FloatingPanel.Title className={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control className={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Controlled position

To control the position of the floating panel programmatically, you can pass the `position` and `onPositionChange` prop
to the machine.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/floating-panel.module.css'

export const ControlledPosition = () => {
  const [position, setPosition] = useState({ x: 200, y: 200 })

  return (
    <FloatingPanel.Root position={position} onPositionChange={(e) => setPosition(e.position)}>
      <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner className={styles.Positioner}>
          <FloatingPanel.Content className={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header className={styles.Header}>
                <FloatingPanel.Title className={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control className={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Anchor Position

Use the `getAnchorPosition` function to compute the initial position of the floating panel. This function is called when
the panel is opened and receives the `triggerRect` and `boundaryRect`.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import styles from 'styles/floating-panel.module.css'

export const AnchorPosition = () => (
  <FloatingPanel.Root
    getAnchorPosition={({ triggerRect }) => {
      if (!triggerRect) return { x: 0, y: 0 }
      return {
        x: triggerRect.x + triggerRect.width / 2,
        y: triggerRect.y + triggerRect.height / 2,
      }
    }}
  >
    <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner className={styles.Positioner}>
        <FloatingPanel.Content className={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header className={styles.Header}>
              <FloatingPanel.Title className={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control className={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body className={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </Portal>
  </FloatingPanel.Root>
)
```

### Open State

To control the open state of the floating panel programmatically, you can pass the `open` and `onOpenChange` prop to the
machine.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/floating-panel.module.css'

export const ControlledOpen = () => {
  const [open, setOpen] = useState(false)

  return (
    <FloatingPanel.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
      <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner className={styles.Positioner}>
          <FloatingPanel.Content className={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header className={styles.Header}>
                <FloatingPanel.Title className={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control className={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body className={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

            <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Lazy Mount

To lazy mount the floating panel, you can pass the `lazyMount` prop to the machine.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import styles from 'styles/floating-panel.module.css'

export const LazyMount = () => (
  <FloatingPanel.Root lazyMount onExitComplete={() => console.log('onExitComplete invoked')}>
    <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner className={styles.Positioner}>
        <FloatingPanel.Content className={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header className={styles.Header}>
              <FloatingPanel.Title className={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control className={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body className={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </Portal>
  </FloatingPanel.Root>
)
```

### Context

To access the context of the floating panel, you can use the `useFloatingPanelContext` hook or the
`FloatingPanel.Context` component.

```tsx
import { FloatingPanel } from '@ark-ui/react/floating-panel'
import { Portal } from '@ark-ui/react/portal'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-react'
import styles from 'styles/floating-panel.module.css'

export const Context = () => (
  <FloatingPanel.Root>
    <FloatingPanel.Trigger className={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Context>
      {(floatingPanel) => <p>floatingPanel is {floatingPanel.open ? 'open' : 'closed'}</p>}
    </FloatingPanel.Context>
    <Portal>
      <FloatingPanel.Positioner className={styles.Positioner}>
        <FloatingPanel.Content className={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header className={styles.Header}>
              <FloatingPanel.Title className={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control className={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" className={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" className={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" className={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger className={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body className={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" className={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" className={styles.ResizeTrigger} />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </Portal>
  </FloatingPanel.Root>
)
```

## API Reference

### Props

### Root

#### Props

**`allowOverflow`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel should be strictly contained within the boundary when dragging

**`closeOnEscape`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel should close when the escape key is pressed

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `false`
Description: The initial open state of the panel when rendered.
Use when you don't need to control the open state of the panel.

**`defaultPosition`**
Type: `Point`
Required: false
Default Value: `undefined`
Description: The initial position of the panel when rendered.
Use when you don't need to control the position of the panel.

**`defaultSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The default size of the panel

**`dir`**
Type: `'ltr' | 'rtl'`
Required: false
Default Value: `"ltr"`
Description: The document's text/writing direction.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel is disabled

**`draggable`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel is draggable

**`finalFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the panel is closed.
By default, the trigger element is focused.

**`getAnchorPosition`**
Type: `(details: AnchorPositionDetails) => Point`
Required: false
Default Value: `undefined`
Description: Function that returns the initial position of the panel when it is opened.
If provided, will be used instead of the default position.

**`getBoundaryEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: The boundary of the panel. Useful for recalculating the boundary rect when
the it is resized.

**`gridSize`**
Type: `number`
Required: false
Default Value: `1`
Description: The snap grid for the panel

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ trigger: string; positioner: string; content: string; title: string; header: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the floating panel. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the panel is opened.
By default, the first focusable element in the content is focused.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`lockAspectRatio`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel is locked to its aspect ratio

**`maxSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The maximum size of the panel

**`minSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The minimum size of the panel

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the panel is opened or closed

**`onPositionChange`**
Type: `(details: PositionChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the position of the panel changes via dragging

**`onPositionChangeEnd`**
Type: `(details: PositionChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the position of the panel changes via dragging ends

**`onSizeChange`**
Type: `(details: SizeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the size of the panel changes via resizing

**`onSizeChangeEnd`**
Type: `(details: SizeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the size of the panel changes via resizing ends

**`onStageChange`**
Type: `(details: StageChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the stage of the panel changes

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the panel

**`persistRect`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel size and position should be preserved when it is closed

**`position`**
Type: `Point`
Required: false
Default Value: `undefined`
Description: The controlled position of the panel

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`resizable`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel is resizable

**`restoreFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to restore focus to the trigger when the panel is closed.

**`size`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The size of the panel

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`strategy`**
Type: `'absolute' | 'fixed'`
Required: false
Default Value: `"fixed"`
Description: The strategy to use for positioning

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The translations for the floating panel.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Body

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: body
**`data-dragging`**: Present when in the dragging state
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### CloseTrigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Content

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-dragging`**: Present when in the dragging state
**`data-topmost`**: Present when topmost
**`data-behind`**: Present when not topmost
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-stage`**: The stage of the control
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### DragTrigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: drag-trigger
**`data-disabled`**: Present when disabled

### Header

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: header
**`data-dragging`**: Present when in the dragging state
**`data-topmost`**: Present when topmost
**`data-behind`**: Present when not topmost
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### Positioner

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### ResizeTrigger

#### Props

**`axis`**
Type: `ResizeTriggerAxis`
Required: true
Default Value: `undefined`
Description: The axis of the resize handle

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: resize-trigger
**`data-disabled`**: Present when disabled
**`data-axis`**: The axis to resize

### RootProvider

#### Props

**`value`**
Type: `UseFloatingPanelReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### StageTrigger

#### Props

**`stage`**
Type: `Stage`
Required: true
Default Value: `undefined`
Description: The stage of the panel

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: stage-trigger
**`data-stage`**: The stage of the stagetrigger

### Title

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Trigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: trigger
**`data-state`**: "open" | "closed"
**`data-dragging`**: Present when in the dragging state

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the panel is open |
| `setOpen` | `(open: boolean) => void` | Function to open or close the panel |
| `dragging` | `boolean` | Whether the panel is being dragged |
| `resizing` | `boolean` | Whether the panel is being resized |
| `position` | `Point` | The position of the panel |
| `setPosition` | `(position: Point) => void` | Function to set the position of the panel |
| `size` | `Size` | The size of the panel |
| `setSize` | `(size: Size) => void` | Function to set the size of the panel |
| `minimize` | `VoidFunction` | Function to minimize the panel |
| `maximize` | `VoidFunction` | Function to maximize the panel |
| `restore` | `VoidFunction` | Function to restore the panel before it was minimized or maximized |
| `resizable` | `boolean` | Whether the panel is resizable |
| `draggable` | `boolean` | Whether the panel is draggable |