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
/** @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
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

