🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Hover Card

A card that displays rich preview content when users hover over a trigger element.

Hover cards (also called preview cards) provide contextual information about an element without requiring a click. They're commonly used to show user profiles when hovering over avatars or usernames, preview links, or display additional details about items in a list. Unlike tooltips which show brief text, hover cards can contain rich formatted content including images, headings, and interactive elements.

Built on top of Radix UI's HoverCard primitive with configurable hover delays, automatic positioning with collision detection, focus management, and accessibility support including proper ARIA attributes.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation


npm install @strongtie/design-system

import { HoverCard } from "@strongtie/design-system/hover-card"

Components

This module exports the following components:

HoverCard
HoverCardTrigger
HoverCardContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

hover-card
hover-card-content
hover-card-portal
hover-card-trigger

Additional Classes

Other CSS classes used by this component:

hover-card-content

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI hover-card Documentation

Dropdown Menu Icon

On This Page

Example Installation Components Props Example Styling Component Slots Additional Classes Accessibility Resources

Contribute

Hover Card

A card that displays rich preview content when users hover over a trigger element.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation


npm install @strongtie/design-system

import { HoverCard } from "@strongtie/design-system/hover-card"

Components

This module exports the following components:

HoverCard
HoverCardTrigger
HoverCardContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"
import { Button } from "@strongtie/design-system/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@strongtie/design-system/hover-card"

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <span className="text-muted-foreground text-xs">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}