Popover

Relatively positioned overlay.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Popover example
import { SlidersHorizontal } from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";
import { Popover, PopoverTrigger } from "@/shim-ui/popover";
import { Slider } from "@/shim-ui/slider";

export default () => (
  <PopoverTrigger>
    <Button>
      <SlidersHorizontal size={16} weight="duotone" />
    </Button>
    <Popover className="w-[200px] p-4" placement="bottom start">
      <div className="grid gap-4">
        <Slider defaultValue={37} isFilled label="Width" />
        <Slider defaultValue={73} isFilled label="Height" />
      </div>
    </Popover>
  </PopoverTrigger>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add popover

Placement

Use the placement prop to position the popover relative to its trigger.

Placement example
import {
  ArrowDownRight,
  ArrowLeft,
  ArrowRight,
  ArrowUpLeft,
} from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";
import { Popover, PopoverTrigger } from "@/shim-ui/popover";

export default () => (
  <>
    <PopoverTrigger>
      <Button>
        <ArrowUpLeft size={16} />
      </Button>
      <Popover className="p-4" placement="left bottom">
        Left bottom
      </Popover>
    </PopoverTrigger>

    <PopoverTrigger>
      <Button>
        <ArrowLeft size={16} />
      </Button>
      <Popover className="p-4" placement="left">
        Left
      </Popover>
    </PopoverTrigger>

    <PopoverTrigger>
      <Button>
        <ArrowRight size={16} />
      </Button>
      <Popover className="p-4" placement="right">
        Right
      </Popover>
    </PopoverTrigger>

    <PopoverTrigger>
      <Button>
        <ArrowDownRight size={16} />
      </Button>
      <Popover className="p-4" placement="right top">
        Right top
      </Popover>
    </PopoverTrigger>
  </>
);