Components

Hover Card

A card that appears on hover.

example.tsx

Import

tsx

import { AppHoverCard, AppHoverCardContent, AppHoverCardTrigger } from "@/components/primitives/AppHoverCard"

API Reference

AppHoverCard extends all native <div> HTML attributes.

Prop	Type	Default	Description
className	string	—	On AppHoverCardContent — additional Tailwind classes merged via cn(). Applied after the px-2 py-1 drop-shadow-xl brand defaults, so it always wins.

Source

src/components/primitives/AppHoverCard.tsx

"use client"

import { cn } from "@/lib/utils"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "../ui/hover-card"

function AppHoverCard(props: React.ComponentProps<typeof HoverCard>) {
  return <HoverCard {...props} />
}

function AppHoverCardTrigger({ children }: { children: React.ReactNode }) {
  return <HoverCardTrigger>{children}</HoverCardTrigger>
}

function AppHoverCardContent({ className, ...props }: React.ComponentPropsWithoutRef<typeof HoverCardContent>) {
  return <HoverCardContent className={cn("px-2 py-1 drop-shadow-xl shadow-none", className)} {...props} />
}

export { AppHoverCard, AppHoverCardTrigger, AppHoverCardContent }