Components
Loading preview...
For sighted users to preview content available behind a link.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-hover-cardimport {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/interfaces-hover-card"
function CodeIcon() {
return (
<svg
aria-hidden="true"
viewBox="0 0 32 32"
className="size-4"
fill="currentColor"
>
<path d="M31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16z" />
<path d="M1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z" />
<path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)" />
</svg>
)
}
export default function DefaultHoverCardDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8 overflow-hidden">
<HoverCard openDelay={0} closeDelay={75}>
<HoverCardTrigger asChild>
<button className="text-sm font-medium text-foreground underline underline-offset-4">
@nextjs
</button>
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" className="w-80">
<div className="flex flex-col items-start justify-start gap-2">
<div className="size-16 overflow-hidden border bg-background">
<img
src="https://github.com/vercel.png"
alt="Next.js"
className="size-full object-cover"
/>
</div>
<div className="flex flex-col">
<h4 className="flex flex-row items-center gap-1 text-base font-semibold">
Next.js
<CodeIcon />
</h4>
<p className="text-sm text-muted-foreground">@nextjs</p>
</div>
<div className="space-y-2">
<p className="text-sm">
The React Framework – created and maintained by @vercel.
</p>
</div>
</div>
</HoverCardContent>
</HoverCard>
</div>
)
}