Command Palette

Search for a command to run...

Hover Card

shadcn/ui

For sighted users to preview content available behind a link.

import {	HoverCard,	HoverCardContent,	HoverCardTrigger,} from "@/registry/optics/hover-card";<HoverCard>	<HoverCardTrigger asChild>		<Button variant="raised">@nextjs</Button>	</HoverCardTrigger>	<HoverCardContent>		<div className="flex justify-between space-x-4">			<div className="space-y-1">				<h4 className="text-sm font-semibold">@nextjs</h4>				<p className="text-sm">					The React Framework – created and maintained by @vercel.				</p>			</div>		</div>	</HoverCardContent></HoverCard>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/hover-card.json

Props

<HoverCard />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
openDelay
number (default: 700)
closeDelay
number

<HoverCardTrigger />
Name
Type
asChild
boolean
<HoverCardContent />
Name
Type
className
string
align
"center" | "start" | "end" (default: "center")
side
"top" | "right" | "bottom" | "left"
sideOffset
number (default: 4)
alignOffset
number
onEscapeKeyDown
(event: KeyboardEvent) => void
onPointerDownOutside
(event: PointerEvent) => void
Guided TourInput