Preview Card

A floating card that appears on hover to show a preview of linked content, such as URLs or user profiles.

#Installation

npx @dinachi/cli@latest add preview-card

#Usage

tsx

import {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardPortal,
  PreviewCardBackdrop,
  PreviewCardPositioner,
  PreviewCardPopup,
  PreviewCardArrow,
  PreviewCardContent,
} from '@/components/ui/preview-card'

#Examples

Default Preview Card

A basic hover preview card

Preview Card with Profile

Preview card with avatar and profile information

#API Reference

Prop	Type	Default	Description
openDelay	number	700	The delay in milliseconds before the preview card opens
closeDelay	number	300	The delay in milliseconds before the preview card closes
open	boolean	—	The controlled open state of the preview card
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	The preferred side of the trigger to render the preview card
sideOffset	number	8	The distance in pixels from the trigger