RadCN
Overlaysreadycomponentready

Hover Card

A dependency-free hover/focus card for profile previews and adjacent contextual content.

Importimport { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger } from 'radcn/hover-card'
Preview

Live package example

Render the upstream @nextjs profile preview with a link-styled trigger, Avatar image/fallback, 20rem content width, and exact profile copy.

Hover Card Demo

Render the upstream @nextjs profile preview with a link-styled trigger, Avatar image/fallback, 20rem content width, and exact profile copy.

Preview
import { Avatar, AvatarFallback, AvatarImage } from 'radcn/avatar'
import { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger } from 'radcn/hover-card'

export function HoverCardDemo() {
  return (
    <HoverCard id="nextjs-hover-card">
      <HoverCardTrigger class="radcn-button radcn-button--link">
        @nextjs
      </HoverCardTrigger>
      <HoverCardPortal>
        <HoverCardContent style="--radcn-hover-card-width:20rem;">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div class="radcn-hover-card-body grid gap-2 text-[0.875rem] font-normal leading-[1.45] [font-family:var(--radcn-font)] [&_p]:m-0 [&_p]:text-muted-foreground">
            <h4>@nextjs</h4>
            <p>The React Framework – created and maintained by @vercel.</p>
            <div>Joined December 2021</div>
          </div>
        </HoverCardContent>
      </HoverCardPortal>
    </HoverCard>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger } from 'radcn/hover-card'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • HoverCardTrigger is a native button, so focus and keyboard interaction remain accessible without React state.
  • Hover and focus open the same content through enhanceHoverCard; Escape closes the card and returns to a closed state.
  • Hover Card is non-modal and does not lock body scrolling.
  • AvatarImage keeps the profile image accessible name on native img alt, while AvatarFallback remains visible backup content.

Customization

  • Root, trigger, portal, and content expose public data-radcn-hover-card hooks and package classes.
  • The upstream w-80 width maps to --radcn-hover-card-width: 20rem on HoverCardContent.
  • Button variant="link" maps to RadCN button link classes on HoverCardTrigger, preserving the visible link-button presentation without Slot/asChild mechanics.
  • Profile layout and text styling map to app-owned class/style composition around Avatar and HoverCardContent.

Remix 3 Notes

  • use client and Radix Hover Card primitives map to server-rendered Remix UI markup plus scoped enhanceHoverCard browser behavior.
  • HoverCardTrigger asChild maps to explicit RadCN trigger styling; RadCN does not need Slot for this example.
  • Avatar, AvatarImage, AvatarFallback, and Button composition maps to existing RadCN packages.
  • className maps to class, data-slot maps to data-radcn-hover-card* hooks, and cn maps to explicit class composition.
  • Tailwind w-80, flex, justify-between, gap-4, space-y-1, text-sm, font-semibold, text-xs, and text-muted-foreground utilities map to CSS variables, package classes, class, and style.
  • The upstream CalendarIcon import is unused source noise and does not introduce an icon dependency.
  • Vendor source remains read-only evidence and is not imported by RadCN.