Link Preview
Page preview on link hover. Pro · Animated components › Link previews
A link that shows a preview card of its target on hover or keyboard focus — an image of the page, a title and the address — springing out beside the link, optionally sliding along it after the pointer. The card is a bonus for sighted pointer users; the link works as a plain link everywhere.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add link-previewnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { LinkPreview } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
href * | string | The link's address; a normal click still follows it. | |
children * | ReactNode | The link text. | |
image | string | Picture of the target page — from your screenshot service or a prepared image. The component never fetches the page itself (cross-origin pages can't be captured in the browser). | |
title | ReactNode | Heading of the preview (default: none). | |
description | ReactNode | A line about the target page. | |
width | number | 240 | Width of the preview image, px (default 240); its height keeps a 16:9 ratio. |
placement | Placement | 'top' | Side of the link the preview opens on (default top). |
openDelay | number | 300 | Delay before opening on hover or keyboard focus, ms (default 300). |
closeDelay | number | 150 | Delay before closing once the pointer leaves the link and the card, ms (default 150). |
followCursor | boolean | false | The preview slides along the link after the pointer, on a spring (default false). |
Related components
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
- Presence Avatars — Who’s online: avatars rearrange as status changes
Previous: Radial Intro · Next: Folded Depth Cards · All Animated components