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.

Popover Dropdowns

Edit example

1234567891011121314151617181920212223242526272829
import { Button } from "@ariakit/react";
import { useState } from "react";
import {
  Popover,
  PopoverArrow,
  PopoverDescription,
  PopoverHeading,
} from "./popover.tsx";
import "./style.css";

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>
        <PopoverDescription>
          We are going to discuss what we have achieved on the project.
        </PopoverDescription>
        <Button className="button">Accept</Button>
      </Popover>
    </div>
  );
}

import { Button } from "@ariakit/react";
import { useState } from "react";
import {
  Popover,
  PopoverArrow,
  PopoverDescription,
  PopoverHeading,
} from "./popover.tsx";
import "./style.css";

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>
        <PopoverDescription>
          We are going to discuss what we have achieved on the project.
        </PopoverDescription>
        <Button className="button">Accept</Button>
      </Popover>
    </div>
  );
}

Standalone Popover

Stay tuned