Overlays

Link Preview Card

A rich preview card that fades and slides in from whichever side it opens on when hovering a linked name, with a brief delay to avoid flicker.

Changelog - v4.2

Rollout was staged and reviewed by Dara Osei before it reached the full fleet, with a follow-up pass from Yuki Tanaka.

Hover or focus a name for the full profile.

Using Link Preview Card

A rich preview card that fades and slides in from whichever side it opens on when hovering a linked name, with a brief delay to avoid flicker.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: side, align, openDelay, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1993Link preview cardOverlaysA small preview panel that appears near a link or username after a brief hover, showing a summary of what is behind it without requiring a click.

2146Edge-slide panelOverlaysA settings panel that springs in flush against a screen edge while the page behind it dims and blurs.

2214Resizing hint tooltipOverlaysA hover label whose bubble smoothly resizes itself when its text is longer or shorter, instead of snapping between sizes.

2295Account Dropdown MenuOverlaysAn avatar trigger that opens a grouped account menu with keyboard shortcut hints, a theme submenu, and a destructive sign-out row styled apart from the rest.

2296Account Menu FlyoutOverlaysA profile summary button that opens into an account menu of labeled rows, with a small curved indicator line that straightens when the menu is open.

1910Anchored detail popoverOverlaysA trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click.