Citation

Inline source chips at the end of a sentence, with a hover / focus PreviewCard listing the sources.

In a reply

An 18px chip (12/17 secondary, max 180px) nudged up 1px after a space, on surface-0 with a .5px hairline (8 % | 4 %). Hover (v2) paints the page colour plus one accent layer (12 %), drops the border and fades in an arrow; after 300 ms a 337px PreviewCard opens above it (fade + .98 scale over 120 ms) and closes 300 ms after leaving. Keyboard focus opens it too; Escape closes it.

Single and multi-source

Components are built on Reka UI (headless primitives) and styled with Tailwind CSS. Reka UI handles accessibility, focus trapping and keyboard navigation, and you control the styling. shadcn-vue

It covers the whole list: Button, Input, Dialog, Sheet, Sidebar, DropdownMenu and more. reka-ui +2

A long site name truncates at 180px but keeps its count. a-very-long-documentation-site-name.example +3

Light and dark

The chips follow their island; the card is portalled to the body, so it follows the page mode (toggle the theme to compare). The last example keeps its card open (v-model:open).

Light

Source chip in light mode. reka-ui +2

Dark

Source chip in dark mode. shadcn-vue

Open card (page mode)

A multi-source card stays open here. reka-ui +2

Parts

Compose the trigger and the card yourself, e.g. for a custom chip label or a card below the text.

Custom label, card below

See the documentation docs +2