overlay/@mihcm/ui·v0.21.0·stable
HoverCard
Preview card that appears on hover. Ideal for user profile previews and link details. Powered by Radix.
Props
The full prop API for HoverCard. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
timing | 'instant' | 'fast' | 'normal' | 'slow' | 'normal' | Open/close delay preset. | 0.10.1 |
openDelay | number | — | Delay in ms before showing. Overrides timing preset. | 0.5.0 |
closeDelay | number | — | Delay in ms before hiding. Overrides timing preset. | 0.5.0 |
open / defaultOpen | boolean | — | Controlled or uncontrolled visibility. | 0.5.0 |
onOpenChange | (open: boolean) => void | — | Visibility change callback. | 0.5.0 |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred content side. | 0.5.0 |
align | 'start' | 'center' | 'end' | 'center' | Content alignment. | 0.5.0 |
sideOffset | number | 8 | Gap between trigger and card. | 0.5.0 |
collisionPadding | number | 12 | Viewport collision padding. | 0.10.1 |
size | 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'md' | Content width preset. | 0.5.0 |
variant | 'default' | 'soft' | 'outline' | 'elevated' | 'plain' | 'default' | Content surface style. | 0.10.1 |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Content padding preset. | 0.10.1 |
maxHeight | 'none' | 'sm' | 'md' | 'lg' | 'none' | Max-height preset for long previews. | 0.10.1 |
scrollable | boolean | false | Enable vertical scrolling for constrained content. | 0.10.1 |
portal | boolean | false | Render content in a Radix portal. | 0.10.1 |
showArrow | boolean | false | Render a tokenized placement arrow. | 0.10.1 |
animation | 'scale' | 'fade' | 'none' | 'scale' | Entrance/exit animation style. | 0.10.1 |
Import
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@mihcm/ui/HoverCard';