An interactive link component with rich preview tooltip showing website metadata like title, description, and images.
Search for a command to run...
An interactive link component with rich preview tooltip showing website metadata like title, description, and images.
GAIA is an open-source AI assistant designed to help you manage your digital life. Built with modern web technologies, it provides a seamless experience for task automation, email management, and calendar integration. Visit GAIA to learn more about the platform, or check out The Experience Company to see who's behind the project. The platform is actively maintained and welcomes contributions from developers around the world.
Check out GAIA on GitHub
No more naked URLs. Auto-unfurls links to show titles and thumbnails.
Link Preview is perfect for enhancing user experience in content-rich applications where you need to display external links with context. It's especially useful in:
Instead of forcing users to click blind links, they can hover to see the destination's title, description, and preview image - making it easier to decide if the link is relevant to them.
npx shadcn@latest add https://ui.heygaia.io/r/link-preview.jsonimport { LinkPreview } from "@/components/ui/link-preview";
export default function Example() {
return (
<p className="text-zinc-300">
Check out the{" "}
<LinkPreview href="https://github.com/theexperiencecompany/gaia">
GAIA repository
</LinkPreview>{" "}
to learn more about this open-source AI assistant.
</p>
);
}The component fetches the URL directly from the frontend and extracts metadata from the HTML response, including:
og:title, og:description, og:image)twitter:title, twitter:description, twitter:image)<title> elementsNote: This approach may face CORS restrictions on some websites. For production use with external URLs, consider using a backend proxy or a dedicated metadata service.
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | - | The URL to preview |
| children | ReactNode | string | - | Link text content |
| className | string | "cursor-pointer rounded-sm bg-primary/20..." | Custom CSS classes for the link |