Cognition

Components

Hover Card

A card that appears on hover over a trigger, showing supplementary information without a click or navigation away from the current surface.

Preview

Rendered with live Cognition tokens. Hover the handle to open the real card, no dark: classes.

Variants

Derek Ho

Co-founder at Distyl. Building the team behind the Cognition design system.

Default

DH

Derek Ho

Co-founder at Distyl. Building the team behind the Cognition design system.

With avatar

DH

Derek Ho

Co-founder at Distyl. Building the team behind the Cognition design system.

Co-founderJoined 2022

With metadata

A plain text preview, the same with an avatar, or enriched with a row of metadata. The panels above are shown open for reference.

States

@derekho

Closed. Only the trigger shows.

DH

Derek Ho

Co-founder at Distyl. Building the team behind the Cognition design system.

Open. Appears after the hover delay.

DH

Derek Ho

Co-founder at Distyl. Building the team behind the Cognition design system.

Co-founderJoined 2022

Open with delay. Tune via openDelay.

Hover cannot be shown at rest, so the open states render the card statically. The preview opens the real card on hover.

API

Prop
Type
Default
Description
HoverCard
component
—
Root that wires the trigger to the card.
HoverCardTrigger
component
—
The element that opens the card on hover or focus.
HoverCardContent
component
—
The floating card surface.
openDelay
number
700
Milliseconds to wait on hover before opening.
closeDelay
number
300
Milliseconds to wait after leaving before closing.
side
"top" | "right" | "bottom" | "left"
"bottom"
Preferred side of the trigger to place the card.
align
"start" | "center" | "end"
"center"
Alignment of the card along that side.

openDelay and closeDelay are set on HoverCard; side and align on HoverCardContent.

Don't and Do

Don't

Don't put actions inside a Hover Card. It is read-only supplementary content, and it dismisses as soon as the pointer leaves, so buttons and inputs are hard to reach. When the reader needs to interact with the content, use a Popover instead.

Do
<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/team/derek-ho">@derekho</a>
  </HoverCardTrigger>
  <HoverCardContent>Profile preview...</HoverCardContent>
</HoverCard>

Use it to preview profile information, link previews, or contextual metadata on hover without leaving the current surface.

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

export function HandlePreview() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <button className="text-text-primary hover:underline">
          @derekho
        </button>
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <p className="text-sm font-semibold">Derek Ho</p>
        <p className="text-sm text-text-subtle">
          Co-founder at Distyl.
        </p>
      </HoverCardContent>
    </HoverCard>
  );
}