Docs/HoverCard

HoverCard

Tooltip-like card that appears on hover.

Usage

tsx

1import { HoverCard, HoverCardTrigger, HoverCardContent } from '@storm-ds/ui'
2
3<HoverCard>
4  <HoverCardTrigger>
5    Hover me
6  </HoverCardTrigger>
7  <HoverCardContent>
8    Card content appears here
9  </HoverCardContent>
10</HoverCard>

Default

@stormui

Storm UI

Modern design system for indie devs.

tsx

1import { HoverCard, HoverCardTrigger, HoverCardContent } from '@storm-ds/ui'
2
3function HoverCardDemo() {
4  return (
5    <HoverCard>
6      <HoverCardTrigger className="underline cursor-help">
7        What is Storm?
8      </HoverCardTrigger>
9      <HoverCardContent>
10        Storm is a modern design system for indie developers.
11      </HoverCardContent>
12    </HoverCard>
13  )
14}

With Align

tsx

1<HoverCard>
2  <HoverCardTrigger>Profile</HoverCardTrigger>
3  <HoverCardContent align="end">
4    <div className="text-sm">
5      <p className="font-medium">John Doe</p>
6      <p className="text-storm-muted">john@example.com</p>
7    </div>
8  </HoverCardContent>
9</HoverCard>

Position Variants

tsx

1<div className="flex gap-8">
2  <HoverCard>
3    <HoverCardTrigger>Top</HoverCardTrigger>
4    <HoverCardContent side="top">Content above</HoverCardContent>
5  </HoverCard>
6  <HoverCard>
7    <HoverCardTrigger>Right</HoverCardTrigger>
8    <HoverCardContent side="right">Content to the right</HoverCardContent>
9  </HoverCard>
10</div>

Note

Card appears on hover over trigger. Use side (top/right/bottom/left) and align (start/center/end) props on HoverCardContent.

Props

Prop	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Position relative to trigger (on HoverCardContent)
align	'start' \| 'center' \| 'end'	'center'	Horizontal/vertical alignment (on HoverCardContent)
className	string	-	Custom classes on any sub-component

Use with AI

Create a Next.js component using Storm UI's HoverCard. Import: `import { HoverCard, HoverCardTrigger, HoverCardContent } from '@storm-ds/ui'`. Hover over HoverCardTrigger to reveal HoverCardContent. Use side prop (top/right/bottom/left) to position card around trigger. Use align prop (start/center/end) for alignment. Supports className on any sub-component. Server component compatible. Example: `<HoverCard><HoverCardTrigger>Username</HoverCardTrigger><HoverCardContent side="right" align="start"><div>User info here</div></HoverCardContent></HoverCard>`

Calendar

MetricCard