Floating Panel

Usage

import { FloatingPanel } from "@chakra-ui/react"

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

Shortcuts

The FloatingPanel component provides shortcuts for common use cases.

FloatingPanelResizeTriggers

The FloatingPanel.ResizeTriggers renders a FloatingPanel.ResizeTrigger for each resize axis.

Writing this:

<FloatingPanel.ResizeTriggers />

is shorthand for the following if you don't need to customize individual handles:

<FloatingPanel.ResizeTrigger axis="n" />
<FloatingPanel.ResizeTrigger axis="s" />
<FloatingPanel.ResizeTrigger axis="e" />
<FloatingPanel.ResizeTrigger axis="w" />
<FloatingPanel.ResizeTrigger axis="ne" />
<FloatingPanel.ResizeTrigger axis="nw" />
<FloatingPanel.ResizeTrigger axis="se" />
<FloatingPanel.ResizeTrigger axis="sw" />

Pass the axes prop to render only specific handles:

<FloatingPanel.ResizeTriggers axes={["s", "e", "se"]} />

Examples

Controlled Open

Use the open and onOpenChange props to control the visibility of the panel.

Store

An alternative way to control the floating panel is to use the RootProvider component and the useFloatingPanel store hook.

This way you can access the panel state and methods from outside the panel.

Stages

Use the stage prop on FloatingPanel.StageTrigger to add buttons and minimize, maximum and restore the panel stage. Here are the available stages:

• default — restore the panel to its normal size and position
• minimized — collapse the panel to a compact height (header only)
• maximized — expand the panel to fill the available boundary

<FloatingPanel.StageTrigger stage="minimized" />

Multiple

Render multiple FloatingPanel.Root instances to show several panels at once. Each root manages its own open state, position, and size independently.

Overlay

Use the createOverlay function to open a floating panel programmatically from anywhere in your app. Render the overlay's Viewport component and call .open() to show the panel.

Context

Use useFloatingPanelContext inside the panel to call minimize, maximize, restore, setPosition, and setSize programmatically.

Disable Drag

Set draggable={false} to prevent the panel from being moved by the user.

Disable Resize

Set resizable={false} to prevent the panel from being resized by the user.

Resize Axes

Pass the axes prop to FloatingPanel.ResizeTriggers to limit which resize handles are rendered.

Min/Max

Use the minSize and maxSize props to constrain how small or large the panel can be resized.

Anchor Position

Use the getAnchorPosition prop to position the panel relative to the trigger element when it opens.

Boundary

Use getBoundaryEl with allowOverflow={false} to confine the panel within a specific container.

Position

Use the position and onPositionChange props to control the panel's position programmatically.

Size

Use the size and onSizeChange props to control the panel's dimensions programmatically.

Prevent Overflow

Set allowOverflow={false} to prevent the panel from being dragged beyond the viewport edges.

RTL

Set the dir="rtl" prop to support right-to-left layouts.

Props

Root