Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Link Preview

Dynamic link previews for your anchor tags

Open in

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

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 NameTypeDefault ValueDescription
childrenReact.ReactNodeNoneThe content to be displayed inside the link component.
urlstringNoneThe URL for the link and for generating the preview image if isStatic is false.
classNamestringNoneAdditional CSS classes to apply to the link component.
widthnumber200Width of the preview image.
heightnumber125Height of the preview image.
qualitynumber50Quality of the preview image.
layoutstring"fixed"Layout type of the image, affects how the image resizes.
isStaticbooleanfalseDetermines if the image source is static or dynamically generated from the URL.
imageSrcstring""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

70+ templates and component blocks combined

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

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji