Unlumen Tooltip Preview

Component

About

Link tooltip that reveals a website preview card with title, description, image and favicon. From Unlumen UI.

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

Code

How Unlumen Tooltip Preview is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TooltipPreview } from "@/components/ui/unlumen-tooltip-preview";

export const TooltipPreviewDemo = () => {
  return (
    <div className="flex flex-col items-center justify-center gap-6 p-12 text-sm text-muted-foreground leading-relaxed max-w-sm text-center">
      <p>
        Built with{" "}
        <TooltipPreview
          href="https://nextjs.org"
          title="Next.js"
          description="The React framework for the web. Used by the largest companies, Next.js enables you to create high-quality web applications."
          image="https://nextjs.org/static/twitter-cards/home.jpg"
          favicon="https://cdn.21st.dev/assets/mirror/c2/c28fdd2a4f31e2dc64f653962286da5c82a4cdfc518b242d32812c624e9a19a4.ico"
        >
          Next.js
        </TooltipPreview>{" "}
        and styled with{" "}
        <TooltipPreview
          href="https://tailwindcss.com"
          title="Tailwind CSS"
          description="A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup."
          image="https://cdn.21st.dev/assets/mirror/7d/7dc2e470f832e27854ad965577d068917a3076fdf4dc12b823ca303b4a847d26.jpg"
          favicon="https://cdn.21st.dev/assets/mirror/34/347062816cc69d3e49c778a2501e5edab4842fa75959a9bb049c5f77f2168ff7.ico"
        >
          Tailwind CSS
        </TooltipPreview>
        {". "}Animated with{" "}
        <TooltipPreview
          href="https://motion.dev"
          title="Motion"
          description="Motion is the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs."
          favicon="https://cdn.21st.dev/assets/mirror/75/75dfc4f949d24338ac7fc0a57ae96dbfba2f911a34ecaa421424018ce93f1f7b.png"
        >
          Motion
        </TooltipPreview>
        .
      </p>
    </div>
  );
};

export default function DefaultDemo() { return <TooltipPreviewDemo />; }