Hover Card

For sighted users to preview content available behind a link.

shadcn/ui docs →

Preview

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/hover-card.json

Dependencies: @radix-ui/react-hover-card

Usage

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

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="underline">@nextjs</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="text-sm">
      The React Framework – created and maintained by Vercel.
    </p>
  </HoverCardContent>
</HoverCard>
0