# Floating Panel

URL: https://ark-ui.com/docs/components/floating-panel
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/floating-panel.mdx

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

---

<ComponentPreview id="FloatingPanel" />

## Anatomy

<Anatomy id="floating-panel" />

```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

**Example: basic**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import styles from 'styles/floating-panel.module.css';

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

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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.

**Example: controlled-size**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/floating-panel.module.css';

export component ControlledSize() {
  let size = track({ width: 400, height: 300 });

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

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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.

**Example: controlled-position**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/floating-panel.module.css';

export component ControlledPosition() {
  let position = track({ x: 200, y: 200 });

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

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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`.

**Example: anchor-position**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import styles from 'styles/floating-panel.module.css';

export component 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 class={styles.Trigger}>{'Toggle Panel'}</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner class={styles.Positioner}>
        <FloatingPanel.Content class={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header class={styles.Header}>
              <FloatingPanel.Title class={styles.Title}>
                <GripVertical />
                {'Floating Panel'}
              </FloatingPanel.Title>
              <FloatingPanel.Control class={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                  <X />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class={styles.Body}>
            <p>{'Some content'}</p>
          </FloatingPanel.Body>

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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.

**Example: controlled-open**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/floating-panel.module.css';

export component ControlledOpen() {
  let open = track(false);

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

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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.

**Example: lazy-mount**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import styles from 'styles/floating-panel.module.css';

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

          <FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={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.

**Example: context**

```ripple
import { FloatingPanel } from 'ark-ripple/floating-panel';
import { Portal } from 'ark-ripple/portal';
import { GripVertical, Minus, Maximize2, ArrowDownLeft, X } from 'lucide-ripple';
import styles from 'styles/floating-panel.module.css';

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

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

```

## API Reference

### Props

**Component API Reference**

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `allowOverflow` | `boolean` | No | Whether the panel should be strictly contained within the boundary when dragging |
| `closeOnEscape` | `boolean` | No | Whether the panel should close when the escape key is pressed |
| `defaultOpen` | `boolean` | No | The initial open state of the panel when rendered.
Use when you don't need to control the open state of the panel. |
| `defaultPosition` | `Point` | No | The initial position of the panel when rendered.
Use when you don't need to control the position of the panel. |
| `defaultSize` | `Size` | No | The default size of the panel |
| `dir` | `'ltr' | 'rtl'` | No | The document's text/writing direction. |
| `disabled` | `boolean` | No | Whether the panel is disabled |
| `draggable` | `boolean` | No | Whether the panel is draggable |
| `getAnchorPosition` | `(details: AnchorPositionDetails) => Point` | No | Function that returns the initial position of the panel when it is opened.
If provided, will be used instead of the default position. |
| `getBoundaryEl` | `() => HTMLElement | null` | No | The boundary of the panel. Useful for recalculating the boundary rect when
the it is resized. |
| `gridSize` | `number` | No | The snap grid for the panel |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ trigger: string; positioner: string; content: string; title: string; header: string }>` | No | The ids of the elements in the floating panel. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `lockAspectRatio` | `boolean` | No | Whether the panel is locked to its aspect ratio |
| `maxSize` | `Size` | No | The maximum size of the panel |
| `minSize` | `Size` | No | The minimum size of the panel |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the panel is opened or closed |
| `onPositionChange` | `(details: PositionChangeDetails) => void` | No | Function called when the position of the panel changes via dragging |
| `onPositionChangeEnd` | `(details: PositionChangeDetails) => void` | No | Function called when the position of the panel changes via dragging ends |
| `onSizeChange` | `(details: SizeChangeDetails) => void` | No | Function called when the size of the panel changes via resizing |
| `onSizeChangeEnd` | `(details: SizeChangeDetails) => void` | No | Function called when the size of the panel changes via resizing ends |
| `onStageChange` | `(details: StageChangeDetails) => void` | No | Function called when the stage of the panel changes |
| `open` | `boolean` | No | The controlled open state of the panel |
| `persistRect` | `boolean` | No | Whether the panel size and position should be preserved when it is closed |
| `position` | `Point` | No | The controlled position of the panel |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `resizable` | `boolean` | No | Whether the panel is resizable |
| `size` | `Size` | No | The size of the panel |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `strategy` | `'absolute' | 'fixed'` | No | The strategy to use for positioning |
| `translations` | `IntlTranslations` | No | The translations for the floating panel. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Body Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Body Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**DragTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | floating-panel |
| `[data-part]` | drag-trigger |
| `[data-disabled]` | Present when disabled |


**Header Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Header Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--width` | The width of the element |
| `--height` | The height of the element |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**ResizeTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `axis` | `ResizeTriggerAxis` | Yes | The axis of the resize handle |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ResizeTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | floating-panel |
| `[data-part]` | resize-trigger |
| `[data-disabled]` | Present when disabled |
| `[data-axis]` | The axis to resize |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseFloatingPanelReturn` | Yes |  |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**StageTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `stage` | `Stage` | Yes | The stage of the panel |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**StageTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | floating-panel |
| `[data-part]` | stage-trigger |
| `[data-stage]` | The stage of the stagetrigger |


**Title Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 |