Hover Card

Cards 20

About

For sighted users to preview content available behind a link.

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

Code

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

Usage.tsx

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/interfaces-hover-card"

function CodeIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 32 32"
      className="size-4"
      fill="currentColor"
    >
      <path d="M31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16z" />
      <path d="M1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z" />
      <path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)" />
    </svg>
  )
}

export default function LeftHoverCardDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 overflow-hidden">
      <HoverCard openDelay={0} closeDelay={75}>
        <HoverCardTrigger asChild>
          <button className="text-sm font-medium text-foreground underline underline-offset-4">
            @nextjs
          </button>
        </HoverCardTrigger>
        <HoverCardContent side="left" align="start" className="w-80">
          <div className="flex flex-col items-start justify-start gap-2">
            <div className="size-16 overflow-hidden border bg-background">
              <img
                src="https://cdn.21st.dev/assets/mirror/75/750f6ec055e825533be5a5f62844312beeb7f41870eac9fa7d1e168f9f352246.png"
                alt="Next.js"
                className="size-full object-cover"
              />
            </div>
            <div className="flex flex-col">
              <h4 className="flex flex-row items-center gap-1 text-base font-semibold">
                Next.js
                <CodeIcon />
              </h4>
              <p className="text-sm text-muted-foreground">@nextjs</p>
            </div>
            <div className="space-y-2">
              <p className="text-sm">
                The React Framework – created and maintained by @vercel.
              </p>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  )
}