Hover Card

프로필처럼 링크 대상에 대한 보조 정보를 미리 보여 줄 때 사용합니다.

미리보기

프로필 미리보기

프로필 링크 옆에 이름과 역할 정보를 미리 보여 줍니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

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

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

HoverCardTrigger에는 의미 있는 링크를 두고 HoverCardContent에는 선택적인 정보를 배치하세요. 미리보기를 열지 않아도 링크 목적을 이해하고 이동할 수 있어야 합니다.

"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 레퍼런스

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

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

미리보기

프로필 미리보기

설치

사용법

API 레퍼런스

접근성