Skip to content
earthlingUI
Components

Hover Card

A non-essential preview for linked content, available by pointer hover or keyboard focus.

@earthling-ui

Playground

openDelay

Milliseconds to wait before opening the preview.

closeDelay

Milliseconds to wait before closing the preview.

Usage

tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "earthling-ui/hover-card";

export function Example() {
  return (
    <>
      <HoverCard>
        <HoverCardTrigger>@earthling-ui</HoverCardTrigger>
        <HoverCardContent>
          Accessible React primitives with carefully tuned defaults.
        </HoverCardContent>
      </HoverCard>
    </>
  );
}
  • The trigger should remain a real link so the destination works without the preview.
  • Do not place required actions or information exclusively inside a hover card.
  • Open and close delays prevent the preview from flickering while the pointer travels.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

bash
npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx
// Generated by dts-bundle-generator v9.5.1

import * as HoverCardPrimitive from '@radix-ui/react-hover-card';

export declare const HoverCard: import("react").FC<HoverCardPrimitive.HoverCardProps>;
export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
export declare const HoverCardContent: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

export {};

Runtime dependencies: @radix-ui/react-hover-card, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Hover Card implementation
tsx
"use client";

import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from "react";
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
import { cn } from "@/utils/cn";

const HoverCard = HoverCardPrimitive.Root;

const HoverCardTrigger = HoverCardPrimitive.Trigger;

const HoverCardContent = forwardRef<
  ComponentRef<typeof HoverCardPrimitive.Content>,
  ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 max-h-(--radix-hover-card-content-available-height) max-w-(--radix-hover-card-content-available-width) w-64 origin-(--radix-hover-card-content-transform-origin) overflow-auto rounded-xl border bg-background p-4 text-foreground shadow-md outline-none duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none",
      className,
    )}
    {...props}
  />
));
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;

export { HoverCard, HoverCardTrigger, HoverCardContent };