Profile with Location Hover Card for Vue

Q: How is the username link made the trigger?

HoverCardTrigger takes as-child, and the demo passes the username link.

Q: How is the avatar made large?

size="lg" on Avatar. The image has the username as its alt, and AvatarFallback shows HB if it fails to load.

Q: How wide is the card?

w-80 on the card, for the extra content. The class is on HoverCardContent.

The handle @haydenbleasel opens a wider profile with a bio, San Francisco, and Joined 2020.

Ark UI

The trigger is @haydenbleasel. The card shows a large avatar, Hayden Bleasel, the handle, a short bio, a pin for San Francisco, and Joined 2020.

It belongs in a community when place and tenure matter. If it must open on a tap, use a Popover. In Vue, Ark UI does not look up the city. That line is text in the card.

PreviewCode

Installation

MCP · Pro

Make your AI a shadcn expert

Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.

Get MCP See plans

Part of Pro

Anatomy

Usage

<HoverCard>
  <HoverCardTrigger :asChild="true">
    <a class="font-medium text-sm underline underline-offset-4" href="#">
      @haydenbleasel
    </a>
  </HoverCardTrigger>
  <HoverCardContent class="w-80">
    <div class="flex gap-4">
      <Avatar size="lg">
        <AvatarImage
          alt="@haydenbleasel"
          :height="40"
          src="https://github.com/haydenbleasel.png"
          :width="40"
        />
        <AvatarFallback>HB</AvatarFallback>
      </Avatar>
      <div class="flex flex-1 flex-col gap-2">
        <div>
          <h4 class="font-semibold text-sm">Hayden Bleasel</h4>
          <p class="text-muted-foreground text-sm">@haydenbleasel</p>
        </div>
        <p class="text-sm">
          Product designer and developer building tools for creators.
        </p>
        <div class="flex items-center gap-4 text-muted-foreground text-xs">
          <div class="flex items-center gap-1">
            <MapPinIcon aria-hidden="true" class="size-3" />San Francisco
          </div>
          <div class="flex items-center gap-1">
            <CalendarDaysIcon aria-hidden="true" class="size-3" />Joined 2020
<!-- The rest of the file is under Installation. -->

FAQ

What is in the card?

A large Avatar, Hayden Bleasel and @haydenbleasel, the bio, then a pin with San Francisco and a calendar with Joined 2020.

How is the username link made the trigger?

HoverCardTrigger takes as-child, and the demo passes the username link.

How is the avatar made large?

size="lg" on Avatar. The image has the username as its alt, and AvatarFallback shows HB if it fails to load.

How wide is the card?

w-80 on the card, for the extra content. The class is on HoverCardContent.

How do I change how fast the card opens and closes?

The card opens a moment after the pointer rests on the trigger and stays up long enough for the pointer to move into it. Both delays are in milliseconds. Set openDelay and closeDelay on HoverCard; they default to 10 and 100. positioning picks another side than the bottom.

Does the card open from the keyboard and on touch screens?

Focusing the username opens the card, moving focus away or pressing Escape closes it. Touch screens have no hover, so keep what matters reachable elsewhere, or use a Popover when the card has to open on a tap.

API Reference

Sets asChild. The rest is on the Hover Card page.

Avatar

Sets size="lg", alt="@haydenbleasel", height="40", src="https://github.com/haydenbleasel.png" and width="40". The rest is on the Avatar page.