Hover Card
Displays rich content in a preview card when a user hovers over a trigger element.
bunx shadcn@latest add @nx-ui/hover-cardBasic usage
HoverCardTrigger renders an anchor by default; HoverCardContent opens below it after a short hover delay.
Placement
side and align position the popup relative to its trigger; sideOffset and alignOffset fine-tune the gap.
Open and close delay
HoverCardTrigger accepts delay and closeDelay (ms) to tune how eagerly the preview appears and lingers — useful for dense tables where accidental hovers are common.
Controlled
Drive open state yourself with open and onOpenChange — here a button toggles the same preview shown by hovering the trigger.
Composition: member preview
A rich card combining an avatar, verification badge and stats — the kind of preview shown when hovering a member's name across Nexus.
Composition: batch and depot previews
Hover cards used inline in body copy — previewing a waste transfer batch and a depot without leaving the page.
Batch WM-2291 left Barrowfield depot this morning and is due at the composting site by 14:00.
API reference
Exported parts and their props, extracted from the component source.