Hover Card

Hover preview for extra context without leaving the page.

Installation

npx shadcn@latest add @iconiq/r-hover-card

File Structure

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/r-hover-card";

export function HoverCardPreview() {
  return (
    <div className="flex flex-col items-center gap-5">
      <HoverCard openDelay={100}>
        <HoverCardTrigger asChild>
          <button
            className="inline-flex items-center text-[15px] font-medium tracking-[-0.02em] text-foreground decoration-transparent underline-offset-4 transition-[text-decoration-color] hover:underline hover:decoration-foreground focus-visible:underline focus-visible:decoration-foreground focus-visible:outline-none"
            type="button"
          >
            View profile
          </button>
        </HoverCardTrigger>
        <HoverCardContent className="w-[320px]">
          <div className="space-y-3">
            <div className="space-y-1">
              <p className="text-[15px] font-medium text-foreground">
                Edwin Vakayil
              </p>
              <p className="text-[13px] leading-5 text-secondary">
                @edwinvakayil · Design Engineer
              </p>
            </div>
            <p className="text-[14px] leading-6 text-secondary">
              Leading onboarding, motion systems, and dense product surfaces
              across the core workspace.
            </p>
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  );
}

Props

Props
Description

HoverCard

children

Composition surface for the trigger and content primitives rendered inside the hover card root.

Type ReactNode

className

Merged onto the inline-flex wrapper that groups the trigger and content primitives.

Type string

openDelay

Delay in milliseconds before the card opens after pointer entry. Keyboard focus opens immediately.

Type number·Default 80

closeDelay

Delay in milliseconds before the card closes after pointer exit. Blur closes immediately unless focus is still moving within the card.

Type number·Default 120

HoverCardTrigger

children

Interactive content rendered by the trigger or by the child passed through asChild.

Type ReactNode

asChild

Lets you supply your own trigger element while keeping the hover-card trigger behavior and class merging.

Type boolean

className

Merged onto the rendered trigger element for local layout or visual styling.

Type string

HoverCardContent

children

Content rendered inside the hover card panel.

Type ReactNode

className

Merged onto the motion.div panel so width, spacing, or surface styles can be adjusted.

Type string

side

Preferred side for the panel before collision handling adjusts the placement.

Type "top" | "right" | "bottom" | "left"·Default "bottom"

align

Horizontal or vertical alignment relative to the trigger, depending on side.

Type "start" | "center" | "end"·Default "center"

sideOffset

Gap between trigger and panel. The component also extends an invisible hover bridge through that gap to reduce accidental closes.

Type number·Default 12

alignOffset

Additional offset applied along the alignment axis.

Type number·Default 0

avoidCollisions

Enables Radix collision handling so the card can shift or flip when space is tight.

Type boolean·Default true

collisionPadding

Padding from viewport edges used during collision detection.

Type number | Partial<Record<Side, number>>·Default 12

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-hover-card, @radix-ui/react-slot, motion.

Uses the dedicated Radix Hover Card primitive instead of Radix Popover for the floating surface.

Preserves the original delayed hover reveal, instant focus open, and spring-driven content motion.

The generated registry file is /r/r-hover-card.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.