Show a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.

import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<Ariakit.PopoverDisclosure className="button">
Accept invite
<Ariakit.Popover className="popover">
<Ariakit.PopoverArrow className="arrow" />
<Ariakit.PopoverHeading className="heading">
Team meeting
We are going to discuss what we have achieved on the project.
<p>12 Jan 2022 18:00 to 19:00</p>
<p>Alert 10 minutes before start</p>
<Ariakit.Button className="button">Accept</Ariakit.Button>

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue