Preview Card

Overlay

A hover card component that displays rich content when hovering over a trigger element. Perfect for link previews, user profiles, and contextual information.

Installation

bash

1npx @dinachi/cli@latest add preview-card

Run the CLI command above to automatically install the component and its dependencies.

API Reference

Prop	Type	Default	Description
`openDelay`	`number`	`700`	The delay in milliseconds before opening
`closeDelay`	`number`	`300`	The delay in milliseconds before closing
`open`	`boolean`	—	Controls the 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 against
`sideOffset`	`number`	`8`	The distance in pixels from the trigger