║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

Link Preview

Dynamic link previews for your anchor tags

Tags

text, special, utilities

Usage (Component Code)

npx shadcn@latest add @aceternity/link-preview

Installation

Run the following command:

npx shadcn@latest add @aceternity/link-preview

Props

| Prop | Type | Description | Default Value | | :--- | :--- | :--- | :--- | | 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. |

Aceternity UI

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║