arca-ui

Hover Card

Floating, paper-like previews for secondary information.

Basic Usage

Hover cards are overlays (Level 3). Keep triggers flat when nested.

Trigger

Hover or focus to open.

Content (Preview)
VC

@vercel

Develop. Preview. Ship. Creators of Next.js.

Joined October 2015

Shadow Offset

Two shadow offset levels. Default is compact (3px) for dense UIs.

Compact (3px)
VC

@vercel

Develop. Preview. Ship. Creators of Next.js.

Joined October 2015
Spacious (6px)
VC

@vercel

Develop. Preview. Ship. Creators of Next.js.

Joined October 2015

Variants

API Reference

Hover Card component with shadow offset variants.

HoverCardContent Props

PropTypeDescription
offset"compact" | "spacious"Shadow offset level (default: compact)
side"top" | "right" | "bottom" | "left"Preferred placement relative to trigger.
align"start" | "center" | "end"Alignment along the trigger.
sideOffsetnumberGap between trigger and content (default: 8).

Offset Levels

OffsetShadowUse Case
compact3pxDense UIs, frequent interactions (default)
spacious6pxHero moments, prominent cards