Ariakit
/

Standalone Popover

Abstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop to determine the position of the popup.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import { useState } from "react";
import { Button } from "@ariakit/react";
import {
} from "./popover.jsx";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<div>
<Button onClick={() => setOpen(!open)} className="button">
Accept invite
</Button>
<Popover open={open} onClose={() => setOpen(false)} className="popover">
<PopoverArrow className="arrow" />
<PopoverHeading className="heading">Team meeting</PopoverHeading>
We are going to discuss what we have achieved on the project.
<Button className="button">Accept</Button>
</Popover>
</div>
);
}

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue