Portal

The Portal component allows you to render children outside the normal DOM hierarchy, typically used for modals, overlays, or floating UI elements.

Installation

npx shadcn@latest add https://foodease-dev-registry.cap.reachcinema.io/r/v1/portal.json

import Portal from "@/components/ui/portal";

<Portal>
  <div>Your content here</div>
</Portal>

Prop	Type	Default	Description
children	ReactNode		Content to render in the portal
id	string	"app-keyboard-portal"	DOM id for the portal host element
className	string		Optional CSS class for the portal host
zIndex	number	2147483646	z-index for stacking order

<Portal id="modal-root" zIndex={9999}>
  <div className="modal">Modal content</div>
</Portal>