Portal
Renders React elements into a different part of the DOM tree.
Installation
pnpm dlx shadcn@latest add @diceui/portalUsage
import { Portal } from "@/components/portal"
export default function App() {
return (
<Portal>
{/* Content to be rendered in a different part of the DOM */}
<div>This will be rendered in the document body by default</div>
</Portal>
)
}Custom Container
Specify a target container for portal rendering:
import { Portal } from "@/components/portal"
export default function App() {
const containerRef = useRef<HTMLDivElement>(null)
return (
<>
<div ref={containerRef} />
<Portal container={containerRef.current}>
<div>This will be rendered in the custom container</div>
</Portal>
</>
)
}API Reference
Portal
A component that renders its children into a different part of the DOM tree using React's createPortal.
Props
Prop
Type