HoverCard

Card that appears on hover via Radix UI

Default

Usage

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@tryvienna/ui'

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="text-sm font-medium underline underline-offset-4">
      @vienna
    </a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-4">
      <Avatar>
        <AvatarFallback>V</AvatarFallback>
      </Avatar>
      <div className="grid gap-1">
        <h4 className="text-sm font-semibold">Vienna</h4>
        <p className="text-sm text-muted-foreground">Desktop app for AI-powered workflows.</p>
        <p className="text-xs text-muted-foreground">Joined December 2024</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Examples

Default

Default

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="text-sm font-medium underline underline-offset-4">
      @vienna
    </a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-4">
      <Avatar>
        <AvatarFallback>V</AvatarFallback>
      </Avatar>
      <div className="grid gap-1">
        <h4 className="text-sm font-semibold">Vienna</h4>
        <p className="text-sm text-muted-foreground">Desktop app for AI-powered workflows.</p>
        <p className="text-xs text-muted-foreground">Joined December 2024</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

API Reference

HoverCard

Also accepts all props from HoverCardPrimitive.Root.

HoverCardTrigger

Also accepts all props from HoverCardPrimitive.Trigger.

HoverCardContent

Prop	Type	Default	Description
align	"center" | "start" | "end"	center
sideOffset	number	4

Also accepts all props from HoverCardPrimitive.Content.

Data Attributes

Component	data-slot
HoverCard	"hover-card-content"
HoverCardTrigger	"hover-card-trigger"
HoverCardContent	"hover-card-content"