Portal

Utility

Renders children into a container outside the React tree.

Portal teleports children into document.body by default, so overlays and toasts escape any overflow or transform ancestors.

npx shadcn@latest add portal

Default

Toggle the button and a card appears in the bottom-left corner of the window.

Preview

Live

tsx

1const [open, setOpen] = useState(false)
2
3{open ? (
4  <Portal>
5    <div className="fixed bottom-4 left-4 rounded-lg border bg-popover p-4 shadow-lg">
6      <p className="text-sm font-medium">Rendered in document.body</p>
7    </div>
8  </Portal>
9) : null} <Button onClick={() => setOpen(!open)}>Toggle portal</Button>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
children	React.ReactNode	Content to teleport.
container	Element \| DocumentFragment= document.body	The DOM node to render into.
mounted	boolean	Internal hydration guard; content only renders on the client.