Hover Card

A preview card that appears when hovering a link.

Assigned to @adapark and due Friday.

import { CalendarDaysIcon } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { people, preventNavigation } from "@/examples/data";

export default function HoverCardBasic() {
  return (
    <p className="text-sm text-muted-foreground">
      Assigned to{" "}
      <HoverCard>
        <HoverCardTrigger
          href="#"
          onClick={preventNavigation}
          className="font-medium text-link underline-offset-2 hover:underline"
        >
          @adapark
        </HoverCardTrigger>
        <HoverCardContent align="start">
          <div className="flex gap-3">
            <Avatar size="lg">
              <AvatarImage src={people[0].image} alt="" />
              <AvatarFallback>AP</AvatarFallback>
            </Avatar>
            <div className="flex min-w-0 flex-col gap-1">
              <p className="text-sm font-medium">Ada Park</p>
              <p className="text-sm text-muted-foreground">
                Product designer working on the website redesign.
              </p>
              <p className="flex items-center gap-1.5 pt-1 text-xs text-faint">
                <CalendarDaysIcon className="size-3.5" />
                Joined March 2024
              </p>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>{" "}
      and due Friday.
    </p>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add hover-card
pnpm dlx shadcn@latest add @jarvis/hover-card

Usage

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

export function ProjectLink() {
  return (
    <HoverCard>
      <HoverCardTrigger href="/projects/website-redesign">Website redesign</HoverCardTrigger>
      <HoverCardContent>
        <p className="font-medium">Website redesign</p>
        <p className="text-muted-foreground">18 of 28 tasks done.</p>
      </HoverCardContent>
    </HoverCard>
  );
}

HoverCardTrigger renders a link. Keyboard, touch and screen reader users can't reach the card, so don't put anything in it that isn't also on the linked page.

Composition

HoverCard
- HoverCardTrigger
- HoverCardContent

Examples

Delay and placement

delay and closeDelay on HoverCardTrigger set the timing. side and align on HoverCardContent set its position.

Part of Website redesign.

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

export default function HoverCardDelay() {
  return (
    <p className="text-sm text-muted-foreground">
      Part of{" "}
      <HoverCard>
        <HoverCardTrigger
          href="#"
          onClick={preventNavigation}
          delay={150}
          closeDelay={100}
          className="font-medium text-link underline-offset-2 hover:underline"
        >
          Website redesign
        </HoverCardTrigger>
        <HoverCardContent side="top">
          <p className="font-medium">Website redesign</p>
          <p className="text-muted-foreground">
            Refresh the marketing site with the new brand. 18 of 28 tasks done.
          </p>
        </HoverCardContent>
      </HoverCard>
      .
    </p>
  );
}

Props

Part	Extends
HoverCard	Base UI's PreviewCard.Root
HoverCardTrigger	Base UI's PreviewCard.Trigger
HoverCardContent	Base UI's PreviewCard.Popup

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Prop	Type	Default
`defaultOpen` Whether the preview card is initially open. To render a controlled preview card, use the `open` prop instead.	`boolean`	`false`
`open` Whether the preview card is currently open.	`boolean`	—
`onOpenChange` Event handler called when the preview card is opened or closed.	`((open: boolean, eventDetails: PreviewCard.Root.ChangeEventDetails) => void)`	—
`onOpenChangeComplete` Event handler called after any animations complete when the preview card is opened or closed.	`((open: boolean) => void)`	—
`actionsRef` A ref to imperative actions. `unmount`: Ends the closing phase of the preview card after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the preview card completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. `close`: Closes the preview card imperatively when called.	`React.RefObject<PreviewCardRootActions \| null>`	—
`handle` A handle to associate the preview card with a trigger. If specified, allows external triggers to control the card's open state. Can be created with the PreviewCard.createHandle() method.	`PreviewCard.Handle<unknown>`	—
`children` The content of the preview card. This can be a regular React node or a render function that receives the `payload` of the active trigger.	`PayloadChildRenderFunction<unknown> \| React.ReactNode`	—
`triggerId` ID of the trigger that the preview card is associated with. This is useful in conjunction with the `open` prop to create a controlled preview card. There's no need to specify this prop when the preview card is uncontrolled (that is, when the `open` prop is not set).	`string \| null`	—
`defaultTriggerId` ID of the trigger that the preview card is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.	`string \| null`	—

HoverCardTrigger

Prop	Type	Default
`handle` A handle to associate the trigger with a preview card.	`PreviewCard.Handle<unknown>`	—
`payload` A payload to pass to the preview card when it is opened.	`unknown`	—
`delay` How long to wait before the preview card opens. Specified in milliseconds.	`number`	`600`
`closeDelay` How long to wait before closing the preview card. Specified in milliseconds.	`number`	`300`

HoverCardContent

Prop	Type	Default
`side` Which side of the anchor element to align the popup against. May automatically change to avoid collisions.	`"bottom" \| "inline-end" \| "inline-start" \| "left" \| "right" \| "top"`	`"bottom"`
`sideOffset` Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. `data.side`: which side of the anchor element the positioner is aligned against. `data.align`: how the positioner is aligned relative to the specified side.	`number \| OffsetFunction`	`4`
`align` How to align the popup relative to the specified side.	`"center" \| "end" \| "start"`	`"center"`
`alignOffset` Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. `data.side`: which side of the anchor element the positioner is aligned against. `data.align`: how the positioner is aligned relative to the specified side.	`number \| OffsetFunction`	`0`