Kartu hover

Pratinjau mengambang yang muncul saat kursor diarahkan ke atas — cuplikan profil, pratinjau tautan, istilah glosarium — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.

import {
  Avatar,
  AvatarFallback,

Hover card menampilkan panel berisi pratinjau kaya yang melayang di atas halaman saat pointer berhenti di pemicunya — tanpa perlu klik. Dibangun di atas primitif Base UI Preview Card dan ditata dengan resep neobrutalis: garis tepi tebal, bayangan pekat, dan tipografi tegas.

Gunakan komponen ini saat:

Intip profil — arahkan kursor ke @mention atau avatar untuk menampilkan bio, statistik, dan tombol ikuti.
Pratinjau tautan — tampilkan judul dan ringkasan halaman sebelum pembaca memutuskan untuk mengklik.
Istilah glosarium — definisikan jargon langsung di tempat dalam dokumentasi tanpa berpindah halaman.

Instalasi


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

Instal dependensi berikut:


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

Salin dan tempel kode berikut ke dalam proyek Anda.

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 }

Perbarui jalur impor agar sesuai dengan pengaturan proyek Anda.

Penggunaan

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

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

Komposisi

Gunakan komposisi berikut untuk membangun HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Penundaan Pemicu

Gunakan delay dan closeDelay pada pemicu untuk mengontrol kapan kartu terbuka dan tertutup.

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

Pemosisian

Gunakan prop side dan align pada HoverCardContent untuk mengontrol penempatan.

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

Contoh

Dasar

import {
  Avatar,
  AvatarFallback,

Sisi

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

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import {

Aksesibilitas

Hover card tidak memiliki pola WAI-ARIA khusus — analogi terdekatnya adalah pola Tooltip. Primitif Base UI membuka kartu saat pemicu menerima fokus keyboard dan menutupnya dengan Escape. Meski begitu, perlakukan isinya sebagai pelengkap bagi pengguna awas dan pastikan pemicunya tetap tautan sungguhan agar konten lengkap tetap dapat dijangkau di halaman tujuannya.

Interaksi keyboard:

Tombol	Aksi
`Tab` / `Shift + Tab`	Memindahkan fokus ke pemicu — kartu terbuka saat pemicu difokus dan tertutup saat fokus meninggalkannya
`Escape`	Menutup kartu
`Enter`	Mengikuti tautan pemicu

Referensi API

Lihat dokumentasi Base UI untuk informasi lebih lanjut.