Link Card

Cards

About

A clickable preview card for an external link that shows a favicon or avatar image, a title, and a description, falling back to an icon glyph when the image fails to load.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Link Card to your project and fits it to your theme.

Code

How Link Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LinkCard from "@/components/ui/link-card";

export default function LinkCardDemo() {
  return (
    <div
      className="grid w-full max-w-3xl grid-cols-1 gap-4 p-8 sm:grid-cols-2"
      style={{
        background: "var(--lk-background-color, var(--background))",
        color: "var(--lk-font-color-base, var(--foreground))",
      }}
    >
      <LinkCard
        title="Component Library"
        description="A shared set of React components and design tokens for consistent websites."
        href="https://example.com/components"
        fallbackIcon="lucide:component"
      />
      <LinkCard
        title="Design Tokens"
        description="Theme variables that keep light and dark palettes consistent across apps."
        href="https://example.com/tokens"
        fallbackIcon="lucide:palette"
      />
      <LinkCard
        title="Jane Doe"
        description="Product designer sharing notes on systems, tokens, and UI."
        href="https://example.com/profile"
        image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUAFz3+8EAAAAAASUVORK5CYII="
        imageVariant="avatar"
      />
      <LinkCard
        title="Broken Preview"
        description="Falls back to the icon glyph when the linked image fails to load."
        href="https://example.com/broken"
        image="https://example.com/does-not-exist.png"
        fallbackIcon="lucide:image-off"
      />
    </div>
  );
}