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
Hitbox
A utility component that extends the clickable area of child elements for improved accessibility and user experience.
PendingPreview
A utility component that disables interactions, maintains keyboard focus, and ensures proper accessibility for buttons, forms, links, switches, and any interactive element while they are pending.