Portal

Attach an element to a DOM node outside the parent component's hierarchy.

Portal is rendered at the bottom left of the page

123456789101112
import "./style.css";
import { Portal } from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      Portal is rendered at the bottom left of the page
      <Portal>I am portal and I am detached at the bottom of the page.</Portal>
    </div>
  );
}

import "./style.css";
import { Portal } from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      Portal is rendered at the bottom left of the page
      <Portal>I am portal and I am detached at the bottom of the page.</Portal>
    </div>
  );
}

API

<Portal />
<Portal />

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue