Skip to content

Hover Card

A card that appears when hovering over a trigger. Perfect for previewing user profiles, recipe info, or ingredients.

$cookest-ui add hover-card

Chef Profile

Show chef details on hover — great for recipe attribution.

Ingredient Preview

Show nutritional or sourcing info for an ingredient on hover.

GuancialePecorino RomanoSpaghetti
PropTypeDefaultDescription
HoverCardTriggerReactNodeElement that triggers the card on hover.
HoverCardContentReactNodeThe floating card content.
openDelaynumber700Delay in ms before the card opens.
closeDelaynumber300Delay in ms before the card closes.
side"top" | "right" | "bottom" | "left""bottom"Side the card appears on.