Link Preview: Free React + Tailwind Component

Hovering an anchor floats up a live website preview card that tilts as it follows the cursor, drawn purely with canvas 2D and needing no external images.

Hovering an inline link floats a lifelike website preview card above it — the browser toolbar, the address bar, and the landing page layout are all drawn live with canvas 2D, with the color scheme generated automatically from the domain. The card moves horizontally with the cursor and tilts slightly.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add link-preview.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Link URLurl

Card widthwidth

320

Card heightheight

200

Cursor follow amountfollow

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<LinkPreview/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/link-preview.en.json

Or, once registries are configured in components.json, install it as @webberui/link-preview.

Usage

import { LinkPreview } from "@/components/ui/link-preview";

<p>
  We build our animations with <LinkPreview url="https://motion.dev">Motion</LinkPreview>.
</p>

children is the visible anchor content, and url serves both as the link target and as the color seed for the preview card. The same domain always produces the same hue.

Props

Prop	Type	Default	Description
`url`	`string`	—	Link target, also used to generate the domain bar and the color scheme
`children`	`React.ReactNode`	—	The visible anchor content
`width`	`number`	`320`	Preview card width (px)
`height`	`number`	`200`	Preview card height (px)
`accent`	`string`	—	Overrides the accent color (HSL/HEX); derived from a hash of the domain when omitted
`follow`	`number`	`40`	Maximum horizontal offset by which the card follows the cursor (px)
`openInNewTab`	`boolean`	`true`	Whether to open the link in a new tab
`className`	`string`	—	Forwarded to the anchor styling

Accessibility

When the user has "reduce motion" enabled at the system level, the card uses a fade in / fade out instead of the spring animation for following and tilting
The link is keyboard focusable, and the preview card floats up on focus as well; the preview card itself is marked aria-hidden and does not interfere with announcements
The canvas is only drawn inside useEffect and scaled by devicePixelRatio, so SSR produces no hydration mismatch

Link Preview