Atoms
Popover
An anchored panel opened by a trigger.
Usage
Import the stylesheet once at the application root: @exegia/corpora-ui/index.css.
import { Popover, PopoverTrigger, PopoverPopup, PopoverTitle, PopoverDescription, PopoverClose } from "@exegia/corpora-ui/ui/popover"
import { Button } from "@exegia/corpora-ui/ui/button"
function ComponentPreview({ title }: { title: string }) {
return (
<div className="relative mx-auto w-full max-w-lg p-6">
<Popover><PopoverTrigger render={<Button variant="outline" />}>Source information</PopoverTrigger><PopoverPopup><PopoverTitle>{title}</PopoverTitle><PopoverDescription>Includes bibliographic details and editorial notes.</PopoverDescription><PopoverClose render={<Button variant="ghost" />}>Close</PopoverClose></PopoverPopup></Popover>
</div>
)
}
<ComponentPreview title={"Source information"} />API notes
open and onOpenChange control visibility. side, align, and sideOffset on the popup adjust positioning. PopoverContent is an alias for PopoverPopup.
Last updated on