Component · popover API

Popover

Floating content next to a button. The browser handles outside clicks and Escape.

Install

npx @lazizbekio/mitame add popover

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/components/mitame/ui/popover";

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger>Share</PopoverTrigger>
      <PopoverContent className="w-64 text-sm">
        <p className="m-0 font-semibold">Anyone with the link</p>
        <p className="mt-1 mb-0 opacity-70">Can view this project. Click outside or press Esc to close.</p>
      </PopoverContent>
    </Popover>
  );
}

Props

Prop	Type	Default	Description
`Popover open / onOpenChange`	`boolean / (open) => void`	—	Optional control.
`PopoverContent placement`	`Placement`	`"bottom"`	Flips and shifts to stay on screen.

Keyboard

Key	Does
`Enter / Space on the button`	Toggle
`Esc`	Close

Styling

Every part has a data-slot starting with popover, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.