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,
  PreviewCardViewport,
  createPreviewCardHandle,
} from '@/components/ui/preview-card'

#Examples

#API Reference

Prop	Type	Default	Description
PreviewCard.open	boolean	—	The controlled open state of the preview card
PreviewCard.defaultOpen	boolean	false	The initial open state when uncontrolled
PreviewCard.onOpenChange	(open: boolean, event: Event) => void	—	Callback fired when the open state changes
PreviewCard.onOpenChangeComplete	(open: boolean) => void	—	Callback fired when open/close animation completes
PreviewCardTrigger.delay	number	600	Milliseconds to wait before the preview card opens on hover
PreviewCardTrigger.closeDelay	number	300	Milliseconds to wait before the preview card closes on unhover
PreviewCardPositioner.side	'top' \| 'right' \| 'bottom' \| 'left' \| 'inline-start' \| 'inline-end'	'bottom'	The preferred side of the trigger to render the preview card
PreviewCardPositioner.sideOffset	number	8	The distance in pixels from the trigger
PreviewCardPositioner.align	'start' \| 'center' \| 'end'	'center'	Alignment along the trigger edge
PreviewCardPositioner.collisionPadding	number	5	Minimum distance from viewport edge before repositioning