Hover Card

Hover Card

For sighted users to preview content available behind a link.


Install the following dependencies

npm i @radix-ui/react-hover-card

Copy and paste the following code into your project

'use client'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { hoverCard } from '@shadow-panda/styled-system/recipes'
const { withProvider, withContext } = createStyleContext(hoverCard)
export const HoverCard = withProvider(styled(HoverCardPrimitive.Root), 'root')
export const HoverCardTrigger = withContext(styled(HoverCardPrimitive.Trigger), 'trigger')
export const HoverCardContent = withContext(styled(HoverCardPrimitive.Content), 'content', {
  align: 'center',
  sideOffset: 4,

Update the import paths to match your project setup


import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
  <HoverCardContent>The React Framework - created and maintained by @vercel.</HoverCardContent>