Portal

import * as Portal from '@radix-ui/react-portal';

export default () => (
  <div style={{ position: 'relative', overflow: 'hidden' }}>
    <p>This content is inside the parent</p>
    <Portal.Root>
      <div
        style={{
          position: 'fixed',
          top: 0,
          right: 0,
          padding: 20,
          backgroundColor: 'white',
          border: '1px solid gray',
        }}
      >
        This content is portaled to document.body
      </div>
    </Portal.Root>
  </div>
);

import * as Portal from '@radix-ui/react-portal';
import { useRef } from 'react';

export default () => {
  const containerRef = useRef(null);

  return (
    <div>
      <div ref={containerRef} />
      <Portal.Root container={containerRef.current}>
        <div>This content is portaled to the custom container</div>
      </Portal.Root>
    </div>
  );
};

import * as Portal from '@radix-ui/react-portal';
import { useState } from 'react';

export default () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Modal</button>

      {open && (
        <Portal.Root>
          <div
            style={{
              position: 'fixed',
              inset: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onClick={() => setOpen(false)}
          >
            <div
              style={{
                backgroundColor: 'white',
                padding: 20,
                borderRadius: 8,
              }}
              onClick={(e) => e.stopPropagation()}
            >
              <h2>Modal Title</h2>
              <p>This modal is rendered in a portal.</p>
              <button onClick={() => setOpen(false)}>Close</button>
            </div>
          </div>
        </Portal.Root>
      )}
    </div>
  );
};