Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@marmoui/ui';Examples
User Preview
User Hover Card
Preview card showing user details
<HoverCard>
<HoverCardTrigger asChild>
<a href="#" className="text-sm font-medium text-ink-primary underline">@johndoe</a>
</HoverCardTrigger>
<HoverCardContent className="w-64">
<div className="flex gap-3">
<Avatar size="md"><AvatarFallback>JD</AvatarFallback></Avatar>
<div className="flex flex-col gap-1">
<Text variant="body-sm" fontWeight="semibold" color="text-ink-dark">John Doe</Text>
<Text variant="body-xs" color="text-ink">Marketing Manager</Text>
<Text variant="body-xs" color="text-ink-light" className="mt-1">Joined March 2024</Text>
</div>
</div>
</HoverCardContent>
</HoverCard>Best Practices
✓
Keep previews concise
Show only the most relevant summary information in the hover card.
✓
Provide open delays
Use a delay before showing the card to prevent accidental triggers.
✗
Don't put forms in hover cards
Hover cards should be informational. Use Popover for interactive content.
✗
Don't rely on hover cards for essential info
Not all devices support hover. Ensure content is accessible via other means.
Props
Props
Accessibility
- Content is accessible via keyboard focus on the trigger.
- Hover card remains visible while hovering over the card itself.
- Escape key dismisses the hover card.
- Content is announced to screen readers when shown.