Groudit UI

Hover Card

Betav1.0.0

마우스 hover 시 표시되는 카드 — 미리보기·프로필 등.

Loading…
// Hover Card 컴포넌트는 카탈로그 페이지에서 import 후 사용.

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/hover-card.json

Composition

Hover Card

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

PackageVersion
@base-ui/react1.5.0
clsx2.1.1
tailwind-merge3.6.0

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

이 컴포넌트는 WAI-ARIA tooltip 패턴을 따릅니다.

Keyboard interactions

KeyDescription
Tab
포커스 시 카드 표시.
Esc
카드 숨김.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.11.4.13

Notes

  • •카드만으로 핵심 정보 전달 X — 보조 정보용.