Hover Card

Installation#

1. Install the dependencies

   npm install cn radix-ui

2. Copy the source into your project

   components/ui/hover-card.tsx

   "use client"import * as React from "react"import { cn } from "cn"import { HoverCard as HoverCardPrimitive } from "radix-ui"function HoverCard({  ...props}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />}function HoverCardTrigger({  ...props}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {  return (    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />  )}function HoverCardContent({  className,  align = "center",  sideOffset = 4,  ...props}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {  return (    <HoverCardPrimitive.Portal data-slot="hover-card-portal">      <HoverCardPrimitive.Content        data-slot="hover-card-content"        align={align}        sideOffset={sideOffset}        className={cn(          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-xl bg-popover p-2.5 text-sm text-popover-foreground shadow-lg shadow-black/[0.06] ring-1 ring-overlay-border outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",          className        )}        {...props}      />    </HoverCardPrimitive.Portal>  )}export { HoverCard, HoverCardTrigger, HoverCardContent }
   

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#