Skip to documentation
UI

FloatingPanel

Viewport-anchored floating panel built from Base UI modal atoms for contextual side conversations, task runs, inspectors, and other non-blocking auxiliary surfaces.

import { FloatingPanel } from '@lobehub/ui/base-ui';
NPMSourceEdit
Feedback

Basic

Loading preview

Toast dodging

Loading preview

Notes

  • FloatingPanel is resizable by default. The active resize handles follow the placement anchor so the panel remains attached to its viewport corner.
  • Use minWidth, maxWidth, minHeight, and maxHeight to constrain resize bounds.
  • Use resizable={false} for fixed auxiliary panels.
  • A bottomRight panel moves the bottom-right toast viewport out of its way while it is open, and restores it on close. The verdict is left shift, then up shift, then a narrowed toast, and finally the panel lifting its own bottom edge — so a toast never renders inside the panel.