Animate UI

Popover

Displays rich content in a portal, triggered by a button.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverPortal>
    <PopoverContent>
      <div>Popover content</div>
      <PopoverClose>Close popover</PopoverClose>
    </PopoverContent>
  </PopoverPortal>
</Popover>

API Reference

Popover

Radix UI API Reference - Popover.Root

PopoverTrigger

Radix UI API Reference - Popover.Trigger

PopoverPortal

Radix UI API Reference - Popover.Portal

The forceMount property is not supported in the PopoverPortal component, as it is used for animation.

PopoverContent

Radix UI API Reference - Popover.Content
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 300, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The forceMount and asChild properties are not supported in the PopoverContent component, as it is used for animation.

PopoverAnchor

Radix UI API Reference - Popover.Anchor

PopoverClose

Radix UI API Reference - Popover.Close

PopoverArrow

Radix UI API Reference - Popover.Arrow

Credits

Built by Skyleen. The source code is available on GitHub.