||

Animated Popover

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A popover whose trigger morphs into a connected, gooey panel.

animated-popover-demo

Overview

Animated Popover coordinates trigger and panel geometry into one connected opening motion. Use it for short supporting content or compact controls that belong to a clear trigger.

Installation
npx honestui@latest add animated-popover

Usage

 
import { Popover, PopoverContent, PopoverTrigger } from "@/components/animated/popover"

<Popover>
  <PopoverTrigger><button>Details</button></PopoverTrigger>
  <PopoverContent>Supporting content</PopoverContent>
</Popover>

Accessibility

The trigger exposes popup state and controls metadata, Escape closes an open panel, and focus remains on the trigger. Use Dialog instead when content requires focus trapping or a multi-step task.

API Reference
PropTypeDefaultDescription
openboolean–Controlled open state.
defaultOpenbooleanfalseInitial uncontrolled state.
onOpenChange(open: boolean) => void–Runs when open state changes.
triggerclick|hover"click"How the panel opens.
sidetop|bottom"bottom"Panel side.
alignstart|center|end"center"Panel alignment.
sideOffsetnumber14Gap and gooey-neck length in pixels.
gooStrengthnumber8Blur radius used by the goo filter.