Link Preview
Hover card that shows a preview image/content of the link destination.
Preview
Link Preview
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Documentation links and content cross-references.
Why this component matters
Link previews reduce navigation anxiety by showing users what they will see before they click.
Usage guidance
Use for external links and cross-references within documentation. Preview should load within 200ms. Include a title, image, and one-line description.
Installation
bash
npx shadcn@latest add @aceternity/link-previewUsage
example.tsxtsx
import { LinkPreview } from "@/components/ui/link-preview";
export default function Example() {
return (
<LinkPreview>
{/* Your content here */}
</LinkPreview>
);
}Source
link-preview.tsx
components/ui/link-preview.tsx