Hover-Karte

Eine schwebende Vorschau, die sich beim Darüberfahren mit der Maus öffnet – Profil-Einblicke, Link-Vorschauen, Glossarbegriffe – mit dem neobrutalistischen Design aus Rahmen und Schatten.

import {
  Avatar,
  AvatarFallback,

Die Hover Card blendet ein Panel mit reichhaltigem Vorschauinhalt über der Seite ein, sobald der Zeiger auf einem Trigger ruht – ganz ohne Klick. Basiert auf dem Primitive Base UI Preview Card und ist nach dem neobrutalistischen Rezept gestaltet: dicke Rahmen, harte Schatten und kräftige Typografie.

Typische Anwendungsfälle:

Profil-Vorschauen – zeige beim Hovern über eine @-Erwähnung oder einen Avatar Bio, Statistiken und einen Folgen-Button.
Link-Vorschauen – zeige Titel und Kurzbeschreibung einer Seite, bevor sich Lesende zum Klick entschließen.
Glossarbegriffe – erkläre Fachbegriffe direkt in der Doku, ohne dass jemand wegnavigieren muss.

Installation


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

Installiere die folgenden Abhängigkeiten:


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

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

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 }

Passe die Importpfade an deine Projektkonfiguration an.

Verwendung

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

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

Komposition

Verwende die folgende Komposition, um eine HoverCard zu erstellen:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger-Verzögerungen

Verwende delay und closeDelay am Trigger, um zu steuern, wann sich die Karte öffnet und schließt.

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

Positionierung

Verwende die Props side und align an HoverCardContent, um die Platzierung zu steuern.

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

Beispiele

Grundlegend

import {
  Avatar,
  AvatarFallback,

Seiten

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

RTL

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import {

Barrierefreiheit

Für Hover Cards gibt es kein eigenes WAI-ARIA-Pattern – die nächste Entsprechung ist das Tooltip-Pattern. Das Base-UI-Primitive öffnet die Card bei Tastaturfokus auf dem Trigger und schließt sie mit Escape. Behandle den Inhalt trotzdem als Ergänzung für Sehende und halte den Trigger als echten Link, damit der vollständige Inhalt am Linkziel erreichbar bleibt.

Tastaturinteraktionen:

Taste	Aktion
`Tab` / `Shift + Tab`	Bewegt den Fokus auf den Trigger – Fokussieren öffnet die Card, Verlassen schließt sie
`Escape`	Schließt die Card
`Enter`	Folgt dem Trigger-Link

API-Referenz

Weitere Informationen findest du in der Base UI-Dokumentation.