Hover Card
Additional context for a hovered or focused link.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Hover Card
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/hover-card.json'Usage
A complete example using the installed component and hook paths.
Hover Card usage
"use client";import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";function HoverCardPreview() { return ( <HoverCard> <HoverCardTrigger href="/docs" className="text-sm underline underline-offset-4"> Explore components </HoverCardTrigger> <HoverCardContent> <strong>Components</strong> <p className="text-muted-foreground">Browse the component overview.</p> </HoverCardContent> </HoverCard> );}export default function Demo() { return <HoverCardPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
HoverCard
HoverCard props
PreviewCardPrimitive.Root.PropsHoverCardTrigger
HoverCardTrigger props
PreviewCardPrimitive.Trigger.Props & { sound?: boolean }- sound
- true
HoverCardContent
HoverCardContent props
PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">- side
- "bottom"
- sideOffset
- 4
- align
- "center"
- alignOffset
- 4