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>
);
}

Follow updates

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

Read latest issue

No Spam. Unsubscribe at any time.