Link Preview

Dynamic link previews for your anchor tags

Tailwind CSS and Framer Motion are a great way to build modern websites.

Visit Aceternity UI for amazing Tailwind and Framer Motion components.

Installation

Run the following command

npx shadcn@latest add @aceternity/link-preview

Add `microlink` in `next.config` file

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      "api.microlink.io", // Microlink Image Preview
    ],
  },
};
 
module.exports = nextConfig;

Static Image Preview Example

Visit Aceternity UI and for amazing Tailwind and Framer Motion components.

I listen to this guy and I watch this movie twice a day

This example shows images being generated from a url AND images being fetched from local folder with a different url for link.

Props

Prop Name	Type	Default Value	Description
children	`React.ReactNode`	`None`	The content to be displayed inside the link component.
url	`string`	`None`	The URL for the link and for generating the preview image if isStatic is false.
className	`string`	`None`	Additional CSS classes to apply to the link component.
width	`number`	`200`	Width of the preview image.
height	`number`	`125`	Height of the preview image.
quality	`number`	`50`	Quality of the preview image.
layout	`string`	`"fixed"`	Layout type of the image, affects how the image resizes.
isStatic	`boolean`	`false`	Determines if the image source is static or dynamically generated from the URL.
imageSrc	`string`	`""`	Source of the image when isStatic is true. If isStatic is false, this prop should not be used.

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access