Hover Card

Hover-triggered preview card panel built on Radix HoverCard primitive with open/close intent delays and collision detection.

// Radix — @radix-ui/react-hover-card
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@shavin/ui";

Default usage

@shavin-ui

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="text-sm font-medium text-link underline underline-offset-2">
      @shavin-ui
    </a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="font-display text-sm font-semibold">Shavin UI</p>
    <p className="mt-1 text-sm text-fg-muted">
      The design system for a reusable design system.
    </p>
  </HoverCardContent>
</HoverCard>

Props

HoverCard takes no props beyond className and the native element's attributes.