Portal

Used to render an element outside the DOM hierarchy.

AI TipWant to skip the docs? Use the MCP Server

Usage

The Portal uses the ReactDOM.createPortal API to render an element at the end of document.body or specific container.

import { Portal } from "@chakra-ui/react"

<Portal>
  <div>Portal content</div>
</Portal>

Examples

Custom Container

Use the container prop to render the portal in a custom container.

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  const containerRef = React.useRef()
  return (
    <>
      <Portal container={containerRef}>
        <div>Portal content</div>
      </Portal>
      <div ref={containerRef} />
    </>
  )
}

Disabled

Use the disabled prop to disable the portal. This will render the children in the same DOM hierarchy.

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Portal disabled>
      <div>Will render the content in place</div>
    </Portal>
  )
}

Server Rendering

During SSR, the Portal component directly renders its content. If you run into any mismatch warnings, we recommended conditionally rendering the Portal component only on the client-side.

Props

Prop	Default	Type
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`container`		`RefObject<HTMLElement \| null>`
`disabled`		`boolean`

Presence

Radiomark