호버 카드

마우스를 올리면 나타나는 플로팅 미리보기 — 프로필 엿보기, 링크 미리보기, 용어집 용어 등 — 에 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.

import {
  Avatar,
  AvatarFallback,

호버 카드는 포인터가 트리거 위에 머무를 때 풍부한 미리보기 패널을 페이지 위에 띄웁니다. 클릭은 필요 없습니다. Base UI Preview Card 프리미티브를 기반으로 하며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

프로필 엿보기 — @멘션이나 아바타에 호버하면 소개, 통계, 팔로우 버튼을 보여 줍니다.
링크 미리보기 — 클릭하기 전에 페이지 제목과 요약을 보여 줍니다.
용어 설명 — 문서를 떠나지 않고 전문 용어를 인라인으로 정의합니다.

설치


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
npx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/hover-card.json

다음 의존성을 설치합니다.


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사해 프로젝트에 붙여넣습니다.

components/ui/hover-card.tsx

"use client"

import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded border-2 bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }

임포트 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

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

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

구성

HoverCard 를 구축하려면 다음 구성을 사용합니다.

HoverCard
├── HoverCardTrigger
└── HoverCardContent

트리거 지연

트리거에 delay 와 closeDelay 를 지정해 카드가 열리고 닫히는 시점을 제어합니다.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

배치

HoverCardContent 의 side 와 align prop 을 사용해 배치를 제어합니다.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

예제

기본

import {
  Avatar,
  AvatarFallback,

사이드

import { Button } from "@/components/ui/button"
import {
  HoverCard,

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import {

접근성

호버 카드에는 전용 WAI-ARIA 패턴이 없습니다. 가장 가까운 대응은 Tooltip 패턴입니다. Base UI 프리미티브는 트리거에 키보드 포커스가 오면 카드를 열고 Escape로 닫습니다. 그래도 콘텐츠는 시각 사용자용 보조로 두고, 트리거는 실제 링크로 두어 전체 내용을 대상 페이지에서 도달할 수 있게 하세요.

키보드 상호작용:

키	동작
`Tab` / `Shift + Tab`	트리거로 포커스 이동 — 포커스하면 카드가 열리고, 떠나면 닫힘
`Escape`	카드 닫기
`Enter`	트리거 링크 따라가기

API 참조

자세한 내용은 Base UI 문서를 참고하세요.