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 https://ui.aceternity.com/registry/link-preview.json

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

Open in

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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro

I'd highly recommend working with Manu on a site redesign. We came to Manu with a basic website shell. Manu quickly took our rough concept and transformed it into a polished, user-friendly website....

Ray Thai

Head of Product at Fireworks