HoverCard

<HStack justify="center">
  <HoverCard>
    <HoverCardTrigger render={<Button variant="link" />}>
      @nextjs
    </HoverCardTrigger>
    <HoverCardContent>
      <div className="flex gap-4">
        <Avatar>
          <AvatarImage src="https://github.com/vercel.png" />
          <AvatarFallback>VC</AvatarFallback>
        </Avatar>
        <div className="space-y-1">
          <h4 className="text-sm font-semibold">@nextjs</h4>
          <p className="text-sm text-muted-foreground">
            The React Framework – created and maintained by @vercel.
          </p>
          <div className="flex items-center pt-2">
            <CalendarDays className="mr-2 size-4 opacity-70" />
            <span className="text-xs text-muted-foreground">
              Joined December 2021
            </span>
          </div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</HStack>

<HStack justify="center">
  <HoverCard>
    <HoverCardTrigger>
      <Avatar className="cursor-pointer">
        <AvatarImage src="https://github.com/shadcn.png" />
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
    </HoverCardTrigger>
    <HoverCardContent>
      <div className="space-y-3">
        <div className="flex gap-3">
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="text-sm font-semibold">shadcn</h4>
            <p className="text-xs text-muted-foreground">@shadcn</p>
          </div>
        </div>
        <p className="text-sm text-muted-foreground">
          Building beautiful interfaces. Creator of shadcn/ui.
        </p>
        <div className="flex gap-4 text-xs text-muted-foreground">
          <span><strong className="text-foreground">1.2k</strong> following</span>
          <span><strong className="text-foreground">45.6k</strong> followers</span>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</HStack>

<HStack justify="center">
  <HoverCard>
    <HoverCardTrigger>
      <span className="text-sm underline underline-offset-4 cursor-pointer">
        Premium Widget
      </span>
    </HoverCardTrigger>
    <HoverCardContent className="w-80">
      <div className="space-y-3">
        <div className="h-32 rounded-lg bg-muted flex items-center justify-center">
          <span className="text-muted-foreground text-sm">Product image</span>
        </div>
        <div>
          <h4 className="text-sm font-semibold">Premium Widget</h4>
          <p className="text-sm text-muted-foreground mt-1">
            High-quality widget with advanced features for professional use.
          </p>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-sm font-semibold">$99.00</span>
          <span className="text-xs text-green-600">In stock</span>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</HStack>

<HStack gap={8} justify="center">
  <HoverCard>
    <HoverCardTrigger render={<Button variant="outline" size="sm" />}>
      Top
    </HoverCardTrigger>
    <HoverCardContent side="top">
      <p className="text-sm">This card appears above the trigger.</p>
    </HoverCardContent>
  </HoverCard>
  <HoverCard>
    <HoverCardTrigger render={<Button variant="outline" size="sm" />}>
      Right
    </HoverCardTrigger>
    <HoverCardContent side="right">
      <p className="text-sm">This card appears to the right.</p>
    </HoverCardContent>
  </HoverCard>
  <HoverCard>
    <HoverCardTrigger render={<Button variant="outline" size="sm" />}>
      Left
    </HoverCardTrigger>
    <HoverCardContent side="left">
      <p className="text-sm">This card appears to the left.</p>
    </HoverCardContent>
  </HoverCard>
</HStack>