║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Hover Card description: For sighted users to preview content available behind a link. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-radix-hover-card" />

Installation

<ComponentInstallation name="components-radix-hover-card" />

Usage

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    <p>Hover card content</p>
  </HoverCardContent>
</HoverCard>

API Reference

HoverCard

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercard" text="Animate UI API Reference - HoverCard Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/hover-card#root" text="Radix UI API Reference - HoverCard.Root" />

</div>

HoverCardTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercardtrigger" text="Animate UI API Reference - HoverCard Trigger Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/hover-card#trigger" text="Radix UI API Reference - HoverCard.Trigger" />

</div>

HoverCardContent

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercardcontent" text="Animate UI API Reference - HoverCard Content Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/hover-card#content" text="Radix UI API Reference - HoverCard.Content" />

</div>

<TypeTable type={{ transition: { description: 'The transition of the hover card content.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 300, damping: 25 }", }, '...props': { description: 'The props of the hover card content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `asChild` and `forceMount` props are not supported in the `HoverCardContent` component as it is used for animation. </Callout>

Credits

• Radix UI Hover Card
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║