Skip to content


Provides base styling for a fixed overlay element.

import {FloatingOverlay} from '@floating-ui/react';

This is useful to dim content or block pointer events behind a floating element, in addition to locking the body scroll.


It renders a <div> with base styling. Can be styled with any CSS solution.

function App() {
  return (
      <div />


interface FloatingOverlayProps {
  lockScroll?: boolean;


Whether the <body> is prevented from scrolling while the overlay is rendered. Uses a robust technique that works on iOS and handles horizontal scrolling.

<FloatingOverlay lockScroll>
  {/* floating element */}