MorphingPopover

A popover component built on the CSS Anchor Positioning API with morphing transition effects. The component smoothly animates between its trigger and expanded states using CSS anchor positioning and transitions.

Import

import { MorphingPopover } from '@mks2508/mks-ui/react';

Overview

Unlike traditional popover implementations that use JavaScript positioning libraries, MorphingPopover leverages the browser's native CSS Anchor Positioning API for:

• Native CSS-based anchor positioning (anchor-name, position-anchor)
• Hardware-accelerated morphing transitions
• @position-try fallback positioning
• No JavaScript positioning calculations required

Basic Usage

<MorphingPopover
  trigger={<Button>Open</Button>}
  content={
    <div className="p-4 space-y-2">
      <h4 className="font-medium">Popover Content</h4>
      <p className="text-sm text-muted-foreground">
        This morphs smoothly from the trigger.
      </p>
    </div>
  }
/>

Browser Support

The CSS Popover API is supported in all modern browsers (Chrome 114+, Firefox 125+, Safari 17+). For older browsers, the component gracefully degrades to a simple show/hide behavior.

API Reference