Hover Image Preview
`HoverImagePreview` and `HoverImagePreviewItem` reveal a floating image for a project, article, person or product row. The list stays semantic and scannable while imagery appears for the item being considered.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
HoverImagePreview and HoverImagePreviewItem reveal a floating image for a project, article, person or product row. The list stays semantic and scannable while imagery appears for the item being considered.
Use real links or buttons inside each item. Keep the preview around 220–320px wide, avoid covering the active row, and use one image at a time. Do not make the image the only way to identify or activate an item.
Pointer previews follow the pointer softly; keyboard focus anchors the preview beside the focused row. The preview is decorative and pointer-transparent, and it leaves the underlying text and focus order unchanged. Touch devices naturally use the normal list, while reduced motion keeps an immediate, quiet preview.
Source: packages/skills/cursor/hover-image-preview.md