Popover

A floating container, triggered by a click.

Source

Installation

npx @rahimstack@latest add popover

API Reference

const PopoverAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Popover__root",
        "z-50 w-72 rounded-md border bg-[--paper] p-4 text-base shadow-sm outline-none",
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
        "data-[state=open]:fade-in-50 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-95",
        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    ]),
})