Nusa UINusa UI

Hover Card

Previous: FormNext: Input

For sighted users to preview content available behind a link.

Docs API Reference
registry/examples/hover-card-demo.tsx
import { CalendarDays } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/hover-card.json

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content shown on hover</HoverCardContent>
</HoverCard>

API Reference

HoverCard

ComponentDescription
HoverCardThe root component
HoverCardTriggerThe trigger element
HoverCardContentThe hover card content

HoverCard Props

PropTypeDefaultDescription
openDelaynumber700Delay in ms before opening
closeDelaynumber300Delay in ms before closing

HoverCardContent Props

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""bottom"Preferred side
sideOffsetnumber0Distance from trigger
align"start" | "center" | "end""center"Alignment against trigger
FormInput

On this page

InstallationUsageAPI ReferenceHoverCardHoverCard PropsHoverCardContent Props