Portal
XS · 350B gzip budgetRenders children into document.body, deferred to a client-only mount.
- Category
- Overlays
- Budget
- xs, static display primitive
- External runtime
- React / React DOM only
axe fixtureSSR rendersource scanbundle budget
Preview
Live fixtureTry the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.
Install
npx shadcn@latest add https://gear5-ui.vercel.app/r/portal.jsonCopies the source into your project. Pulls in 1 shared registry item: use-hydrated.
New here? Set up Tailwind and import aliases first →Source & props
Edit on GitHub ↗Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.
"use client";
import { createPortal } from "react-dom";
import { useHydrated } from "../lib/use-hydrated";
/**
* Renders `children` into `document.body` instead of the current DOM
* position — what a dialog or toast needs so it is not visually clipped or
* z-index-trapped by an ancestor with `overflow: hidden`.
*
* Deferred to a client-only mount: `document` does not exist during server
* rendering, and portaling during the very first client render (before
* hydration settles) can detach the node React expects to reconcile against.
*/
export function Portal({ children }: { children: React.ReactNode }) {
const hydrated = useHydrated();
if (!hydrated) return null;
return createPortal(children, document.body);
}
What CI checks
Quality contract- Bundled, minified and gzipped against its tier budget
- Audited by axe in the state previewed above
- Rendered through react-dom/server with no browser globals
- Scanned for network calls, dangerous sinks, and unguarded animation