Hover Card

For sighted users to preview content available behind a link.

Preview

Installation

npm install @matrix-ui/components

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@matrix-ui/components'

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework - created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Examples

Simple Link Preview

User Profile Card

Product Preview