Hoverkaart

Een zwevend voorbeeldvenster dat verschijnt als je er met de muis overheen gaat — profielvoorbeelden, linkvoorbeelden, woordenlijsttermen — met die neobrutalistische stijl van randen en schaduwen.

import {
  Avatar,
  AvatarFallback,

De hover card laat een paneel met rijke voorbeeldcontent boven de pagina zweven zodra de aanwijzer op een trigger rust — klikken is niet nodig. Gebouwd op de Base UI Preview Card-primitive en vormgegeven volgens het neobrutalistische recept: dikke randen, scherpe schaduwen en vette typografie.

Ideaal voor:

Profielvoorbeelden — beweeg over een @mention of avatar om de bio, statistieken en een volgknop te tonen.
Linkvoorbeelden — laat de titel en samenvatting van een pagina zien voordat de lezer de klik waagt.
Woordenlijsttermen — leg jargon inline uit in documentatie zonder dat de lezer hoeft weg te navigeren.

Installatie


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

Installeer de volgende afhankelijkheden:


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

Kopieer en plak de volgende code in je project.

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 }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

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

Compositie

Gebruik de volgende compositie om een HoverCard te bouwen:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Vertragingen van de trigger

Gebruik delay en closeDelay op de trigger om te bepalen wanneer de kaart opent en sluit.

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

Positionering

Gebruik de props side en align op HoverCardContent om de plaatsing te bepalen.

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

Voorbeelden

Basis

import {
  Avatar,
  AvatarFallback,

Zijden

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

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import {

Toegankelijkheid

Hover cards hebben geen eigen WAI-ARIA-patroon — het Tooltip-patroon komt het dichtst in de buurt. De Base UI-primitive opent de kaart zodra de trigger toetsenbordfocus krijgt en sluit hem met Escape. Behandel de inhoud toch als aanvulling voor ziende gebruikers en houd de trigger een echte link, zodat de volledige content op de bestemming bereikbaar blijft.

Toetsenbordinteracties:

Toets	Actie
`Tab` / `Shift + Tab`	Verplaatst de focus naar de trigger — focussen opent de kaart, weggaan sluit hem
`Escape`	Sluit de kaart
`Enter`	Volgt de link van de trigger

API-referentie

Zie de Base UI-documentatie voor meer informatie.