Neumorphism UI

Hover Card

Use HoverCard to preview supporting information about a link, such as a person's profile.

Preview

Profile preview

Preview a person's name and role beside a profile link.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/hover-card

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Keep HoverCardTrigger a meaningful link and put optional context in HoverCardContent. Readers should still be able to understand and follow the link without opening the preview.

"use client";

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="/team/alex">Alex Kim</HoverCardTrigger>
      <HoverCardContent>Product designer based in Seoul.</HoverCardContent>
    </HoverCard>
  );
}

API Reference

A supplemental preview of a link destination. Do not hide essential content or actions behind hover. The original link must remain meaningful.

ComponentPropTypeDefaultDescription
HoverCardopen / defaultOpenboolean—Set controlled or initial state.
HoverCardTriggerdelay / closeDelaynumber—Opening and closing delay in milliseconds.
HoverCardContentsideOffsetnumber—Set panel placement or spacing with viewport collision handling.

Accessibility

  • 01

    Do not hide essential content or actions behind hover. The original link must remain meaningful.

  • 02

    Preserve labels and visible focus when customizing render or className.