Component

Fuji Portal

Renders children into document.body while re-stamping the active theme, material, radius and elevation onto a wrapper, so Fuji UI's CSS variables still resolve outside the React tree.

Basic

A plain React portal loses the appearance, because the data-fuji-* attributes live on an ancestor that document.body is not inside. This carries them along.

The portalled node is in document.body, styled as though it were still here.

Fuji UI's own overlays (Dialog, Drawer, Popover, Toast) already do this - reach for it when you are portalling your own content
container overrides the destination when document.body is not where it should land

API reference

Prop	Type	Default	Description
children *	React.ReactNode	None	What to render into the portal container.
container	HTMLElement \| null	document.body	Defaults to `document.body`.

children *None

React.ReactNode

What to render into the portal container.

containerdocument.body

HTMLElement | null

Defaults to `document.body`.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent