AI Citation

An inline source marker for a generated answer: a superscript pill carrying a label such as 1 or a, and a preview card holding the source's host, title and an optional excerpt.

The card is not a popover and not a modal. It opens on hover and on focus, and closes on Escape, which means it is reachable by keyboard and works on touch without a portal. The pill itself is a real <a> that opens the source in a new tab, so the citation is useful even when the card is closed.

Usage

Drop it straight into assistant prose — anywhere a sentence runs. Pair it with AI Response, which turns [n] markers into pills automatically when you want a lighter citation.

<template>
  <div class="w-full max-w-md rounded-2xl border border-default p-6 text-sm leading-relaxed text-highlighted">
    <p>
      Animation primitives usually animate
      <MAiCitation
        label="1"
        title="Spring defaults"
        url="https://example.com"
        description="The easing and stiffness values that every component in this kit falls back to when you do not pass your own."
      >
        <template #favicon>
          <UIcon name="i-lucide-sparkles" />
        </template>
      </MAiCitation>
      on first paint and then never touch
      <MAiCitation
        label="2"
        title="Interruptible by default"
        url="https://motion.dev/docs/react-motion"
      />
      again. The same rules hold for
      <MAiCitation
        label="3"
        title="Reduced motion"
        url="https://example.com/docs/accessibility"
        description="Every primitive in this kit reads prefers-reduced-motion and falls back to an instant state change."
      />
      .
    </p>

    <p class="mt-4 text-xs text-muted">
      Hover or focus a pill to peek. Press Escape to dismiss.
    </p>
  </div>
</template>

<script setup lang="ts">
</script>

Customize

Props

Slots

UI

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

Accessibility

• The pill is a real anchor with target="_blank" and rel="noopener noreferrer", so the link is reachable, focusable and middle-clickable independently of the card.
• The card is wired to the pill with aria-describedby, and the attribute is present only while the card is mounted — the reference never dangles.
• The wrapper opens on focus and closes on blur, so tabbing through prose reveals each citation without a pointer. mouseleave and blur share one 120ms grace period, which is what lets the pointer cross the 6px gap between pill and card without the card dismissing first.
• The Escape handler is registered only while the card is open, so a page full of closed citations never intercepts the key.
• Under prefers-reduced-motion: reduce the card appears at its resting state with duration: 0, and its exit is an instant opacity change with no travel.
• The card is a <span> inside a <span>, positioned absolutely. It is not in a portal, so an ancestor with overflow: hidden will clip it.

Performance

• Card open state is one ref. Opening mounts a single Motion element; the :key is the card id, so changing url remounts rather than morphing a card that described a different page.
• Centring uses a -ml-36 margin, not translateX(-50%), and the fixed width is written out in style alongside it. Motion animates scale and y on the same element, so a hand-written transform would fight the animation for the transform property. The trade-off is that the card width is fixed at 18rem in the stylesheet, so a very long title wraps rather than widening.
• Only one setTimeout is ever live. open clears a pending close and onBeforeUnmount clears it again, so navigating away mid-grace cannot leave a timer holding a detached component.