행동과 오버레이@neumorphism-ui/hover-card

Hover Card

링크의 목적지를 보조적으로 설명하는 미리보기 카드. 필수 정보나 행동을 hover에만 두지 마세요. 원래 링크만으로도 목적지를 알 수 있어야 합니다.

@neumorphism-ui/hover-card

Registry JSON

미리보기

프로필 미리보기

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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)]">{"프로필 미리보기"} <span aria-hidden="true">↗</span></HoverCardTrigger><HoverCardContent><strong id="profile-preview">Alex Kim</strong><p>{"제품 디자이너 · 서울"}</p></HoverCardContent></HoverCard>);
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`HoverCard`	`open / defaultOpen`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`HoverCardTrigger`	`delay / closeDelay`	`number`	`—`	열기와 닫기의 지연 시간(ms)입니다.
`HoverCardContent`	`sideOffset`	`number`	`—`	화면 경계를 고려한 패널 위치와 간격입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성