Portal

Overview

Portal renders children into a DOM node outside the parent hierarchy. Use it for overlays that must escape stacking or overflow contexts.

Live demoInteractive

Anatomy

• Root: The portal mount target.
• Content: The rendered children.

Usage

import { Portal } from '@grasdouble/lufa_design-system';

export function Modal() {
  return (
    <Portal>
      <div className="modal-overlay">
        <div className="modal-content">I am attached to document.body</div>
      </div>
    </Portal>
  );
}

Props

Prop	Type	Default	Description
container	HTMLElement	document.body	The DOM element to mount into.
children	ReactNode	-	The content to render.

Accessibility

Portals are often used for modals and tooltips. Manage focus, keyboard traps, and aria-* attributes in the overlay content.

Theming & Tokens

Portal does not introduce tokens. Visual styling comes from the rendered content.

Do / Don’t

Do

Use Portal for modals, popovers, and dropdowns that must escape overflow or z-index constraints.

Don’t

Avoid using a portal for simple layout problems—use Flex or Grid instead.

Related Components

• Box
• VisuallyHidden