Cursor Hover Card

Use Cursor Hover Card to reveal rich supporting information above the pointer while it moves within a trigger. The card enters from the cursor, exits with a quieter return, and tilts in response to pointer speed and direction. Keyboard users receive the same content in a stable trigger-anchored position.

Preview

Reduce motion:Off

Tune:Off

Inspect

DTDinil ThilakarathneDesign engineer

Installation

npx shadcn@latest add @sona-ui/cursor-hover-card

Usage


export default function CursorHoverCardDemo() {
  return (
    <CursorHoverCard.Root>
      <CursorHoverCard.Trigger>
        <a
          href="https://github.com/Dinil-Thilakarathne"
          className="group flex items-center gap-3 rounded-xl px-3 py-2 outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
        >
          <span className="grid size-9 place-items-center rounded-full bg-foreground font-semibold text-background text-sm">
            DT
          </span>
          <span>
            <span className="block font-medium text-sm">
              Dinil Thilakarathne
            </span>
            <span className="block text-muted-foreground text-xs">
              Design engineer
            </span>
          </span>
          <ArrowUpRight className="ml-3 size-4 text-muted-foreground transition-colors group-hover:text-foreground" />
        </a>
      </CursorHoverCard.Trigger>
 
      <CursorHoverCard.Content className="w-72 p-4">
        <div className="flex items-start gap-3">
          <span className="grid size-11 shrink-0 place-items-center rounded-full bg-foreground font-semibold text-background">
            DT
          </span>
          <div>
            <p className="font-semibold text-sm">Dinil Thilakarathne</p>
            <p className="text-muted-foreground text-xs">@dinilthilakarathne</p>
          </div>
        </div>
        <p className="mt-3 text-muted-foreground text-sm leading-relaxed">
          Building clear, expressive interfaces where interaction and motion
          improve understanding.
        </p>
      </CursorHoverCard.Content>
    </CursorHoverCard.Root>
  );
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`	Trigger and content parts associated with the card.
`defaultOpen`	`boolean`	`false`	Whether the card is open when uncontrolled.
`open`	`boolean`	`undefined`	Controlled open state.
`onOpenChange`	`PreviewCard.Root.Props["onOpenChange"]`	`undefined`	Called whenever the card requests an open-state change.
`reducedMotion`	`CursorHoverCardReducedMotion`	`"user"`	Controls whether motion follows, forces, or ignores the user's reduced-motion preference.

Accessibility

Preview Card semantics, focus behavior, dismissal, and pointer grace areas come from Base UI. Pointer tracking is ignored for touch input. With reduced motion enabled, the card keeps the same cursor-following anchor updates but removes directional rotation, position smoothing, and open or close animation.

Was this page helpful?

Your response helps us improve component docs.