āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/link-preview ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Dynamic link previews for your anchor tags
text, special, utilities
npx shadcn@latest add @aceternity/link-preview
Run the following command:
npx shadcn@latest add @aceternity/link-preview
| 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. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā