Overlays

Hover Card

Preview content on hover.

Import

tsx

import { HoverCard } from "@cooud-ui/ui";

bash

npx cooud-ui add hover-card

Examples

Profile preview

A preview card that appears on hover or focus — great for profile mentions.

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link" className="px-0">
      @cooud
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="flex gap-3">
      <span
        className="grid size-11 shrink-0 place-items-center rounded-full bg-gradient-primary text-primary-foreground"
        aria-hidden="true"
      >
        <Users className="size-5" />
      </span>
      <div className="flex flex-col gap-1">
        <p className="text-sm font-semibold text-fg">Cooud</p>
        <p className="text-sm text-fg-secondary">
          The token-driven design system that themes itself.
        </p>
        <div className="mt-1 flex items-center gap-1.5 text-xs text-fg-tertiary">
          <CalendarDays className="size-3.5" aria-hidden="true" />
          Joined June 2026
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>