Skip to content


Provides base styling for a fixed overlay element to dim content or block pointer events behind a floating element.

It's a regular <div />, so it can be styled via any CSS solution you prefer.

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


interface Props {
  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.

If you need a more advanced solution, or find enabling this prop causes unwanted side effects in your application, react-remove-scroll is a solid solution.