Hover Card

For sighted users to preview content available behind a link.

Basic Hover Card

User Profile Preview

Show user details on hover without navigating away.

JDJohn Doe

Positioning

Usage

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

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@username</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex gap-4">
      <Avatar>
        <AvatarFallback>UN</AvatarFallback>
      </Avatar>
      <div>
        <h4 className="font-semibold">User Name</h4>
        <p className="text-sm text-muted-foreground">
          Description text here.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

{/* With positioning */}
<HoverCardContent side="top" align="start">
  ...
</HoverCardContent>

Separator

Alert