Shadow Panda
Shadow Panda
Component
Hover Card

Hover Card

For sighted users to preview content available behind a link.

shadcn/uiRadix UIAPI Reference

Installation

Install the following dependencies

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

Copy and paste the following code into your project

components/ui/hover-card/index.tsx
'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

Usage

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