Actions & overlays@neumorphism-ui/hover-card

Hover Card

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

@neumorphism-ui/hover-card

Registry JSON

Preview

Preview profile

Installation

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

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

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

Example

export default function Example() {
  const id = React.useId();
  return (<HoverCard><HoverCardTrigger href="#profile-preview" className="inline-flex items-center gap-3 rounded-[var(--neu-radius-control)] border border-[color:var(--neu-edge)] bg-[var(--neu-surface)] px-4 py-3 font-semibold text-[var(--foreground)] [box-shadow:var(--neu-shadow-raised-sm)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]">{"Preview profile"} <span aria-hidden="true">↗</span></HoverCardTrigger><HoverCardContent><strong id="profile-preview">Alex Kim</strong><p>{"Product designer · Seoul"}</p></HoverCardContent></HoverCard>);
}

API Reference

Component	Prop	Type	Default	Description
`HoverCard`	`open / defaultOpen`	`boolean`	`—`	Set controlled or initial state.
`HoverCardTrigger`	`delay / closeDelay`	`number`	`—`	Opening and closing delay in milliseconds.
`HoverCardContent`	`sideOffset`	`number`	`—`	Set panel placement or spacing with viewport collision handling.