Interactive

Shape-shift popover

A popover component with morphing animations powered by motion-v, built as a wrapper around Nuxt UI's Popover component.

Usage

<template>
  <div class="flex justify-center">
    <MMorphingPopover>
      <UButton color="primary">
        Open Popover
      </UButton>

      <template #content>
        <div class="p-4 w-64">
          <h3 class="font-bold text-lg mb-2">
            Shape-shift popover
          </h3>
          <p class="text-muted mb-4">
            This is a popover with morphing animations.
          </p>
          <UButton
            color="primary"
            variant="solid"
            size="sm"
          >
            Action
          </UButton>
        </div>
      </template>
    </MMorphingPopover>
  </div>
</template>

Examples

<template>
  <div class="flex justify-center items-center">
    <MMorphingPopover>
      <UButton
        color="primary"
        size="lg"
      >
        <UIcon
          name="i-lucide-help-circle"
          class="w-5 h-5 mr-2"
        />
        Help Center
      </UButton>

      <template #content>
        <div class="p-8 w-96">
          <div class="flex items-start mb-6">
            <div class="w-12 h-12 rounded-full bg-primary/10 dark:bg-primary/70 flex items-center justify-center mr-4 flex-shrink-0">
              <UIcon
                name="i-lucide-help-circle"
                class="w-6 h-6 text-primary"
              />
            </div>
            <div>
              <h3 class="font-bold text-xl mb-2 text-highlighted">
                Need Help?
              </h3>
              <p class="text-muted text-sm">
                Get assistance with our platform features
              </p>
            </div>
          </div>

          <div class="space-y-4 mb-8">
            <div class="flex items-center p-4 rounded-lg hover:bg-muted cursor-pointer transition-colors">
              <UIcon
                name="i-lucide-book-open"
                class="w-6 h-6 text-muted mr-4"
              />
              <div>
                <div class="font-medium text-highlighted">
                  Documentation
                </div>
                <div class="text-sm text-muted">
                  Comprehensive guides and tutorials
                </div>
              </div>
            </div>
            <div class="flex items-center p-4 rounded-lg hover:bg-muted cursor-pointer transition-colors">
              <UIcon
                name="i-lucide-message-circle"
                class="w-6 h-6 text-muted mr-4"
              />
              <div>
                <div class="font-medium text-highlighted">
                  Contact Support
                </div>
                <div class="text-sm text-muted">
                  24/7 support team ready to help
                </div>
              </div>
            </div>
            <div class="flex items-center p-4 rounded-lg hover:bg-muted cursor-pointer transition-colors">
              <UIcon
                name="i-lucide-youtube"
                class="w-6 h-6 text-muted mr-4"
              />
              <div>
                <div class="font-medium text-highlighted">
                  Video Tutorials
                </div>
                <div class="text-sm text-muted">
                  Step-by-step video guides
                </div>
              </div>
            </div>
          </div>

          <UButton
            color="primary"
            variant="solid"
            block
            size="lg"
          >
            Visit Help Center
          </UButton>
        </div>
      </template>
    </MMorphingPopover>
  </div>
</template>

Customize

Modeclick

ContentThe popover morphs smoothly from the trigger into its content.

Arrow

Portal

Dismissible

Default Open

Open

Modal

Open Delay0

Close Delay0

Scale0.95

Props

Prop	Type	Default	Description
`scale`	`number`	`0.95`	Scale factor for trigger morphing animation.
`variants`	`object`	`{}`	Custom animation variants for initial, animate, and exit states.
`transition`	`object`	`{}`	Custom transition configuration for animations.
`mode`	`'click' \| 'hover'`	`'click'`	Interaction mode for the popover.
`content`	`object`	`{}`	Content positioning options.
`arrow`	`boolean \| object`	`false`	Show arrow indicator.
`portal`	`string \| boolean \| HTMLElement`	`true`	Render popover in a portal.
`dismissible`	`boolean`	`true`	Whether the popover can be dismissed.
`defaultOpen`	`boolean`	`false`	Whether the popover is open by default.
`open`	`boolean`	`undefined`	Controlled open state.
`modal`	`boolean`	`false`	Whether the popover is modal.
`openDelay`	`number`	`0`	Delay before opening in hover mode (ms).
`closeDelay`	`number`	`0`	Delay before closing in hover mode (ms).
`ui`	`object`	`{}`	UI customization options.

Events

Event	Payload	Description
`update:open`	-	Emitted when the popover open state changes.

Slots

Slot	Props	Description
`default`	-	The trigger element.
`content`	-	The popover content.
`anchor`	-	Custom anchor element (only works with `mode="click"`).

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.morphingPopover in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-
`trigger`	-	`inline-block will-change-transform`
`content`	-
`contentInner`	-	`will-change-transform`

Edit this pageorReport an issue

Shape-shift dialog

A modal dialog that morphs from its trigger using shared layout animations.

Notification Badge

A count badge that springs onto any element and disappears the moment the count reaches zero.