Neverending Package Mountain
    Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published


    A wrapper for rendering components in React Portals, with support for nested portals and stacking. No need to use z-index at all with this portal, that's right!


    yarn add @chakra-xui/portal
    # or
    npm i @chakra-xui/portal

    Import components

    import { Portal, PortalManager } from "@chakra-xui/portal"

    Render the PortalManager once at the root of your application

    function App() {
      return (
          <CSSReset />
          <PortalManager>{/* Your app goes here  */}</PortalManager>

    Basic usage

    Portals are render into the portal manager's node by default not document.body.

    It'll only render into document.body if you don't include PortalManager.

      <Portal>This text has been portaled</Portal>

    Nested portals

    Nesting portal can be very useful to build complex widgets like nested menu, popovers, modal, etc.

      This is a portal.
      <Portal>This is a nested portal</Portal>

    Custom container

    You can also portal elements into a custom containers. Simply pass a container prop that points to the node of that element.

      <div data-testid="container" ref={ref} />
      <Portal container={() => ref.current}>
        <h1 data-testid="heading">Hello world</h1>


    npm i @chakra-xui/portal

    DownloadsWeekly Downloads






    Unpacked Size

    51.7 kB

    Total Files


    Last publish


    • avatar