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.

import { Button } from "@ariakit/react";
import { useState } from "react";
import {
} from "./popover.tsx";
import "./style.css";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<Button onClick={() => setOpen(!open)} className="button">
Accept invite
<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>

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue