Tarjeta al pasar

Una vista previa flotante que se abre al pasar el cursor por encima —vislumbres de perfiles, vistas previas de enlaces, términos del glosario— con ese estilo neobrutalista de bordes y sombras.

import {
  Avatar,
  AvatarFallback,

La hover card hace flotar sobre la página un panel con contenido de vista previa enriquecido cuando el puntero se detiene sobre un disparador, sin necesidad de hacer clic. Está construida sobre la primitiva Base UI Preview Card y sigue la receta neobrutalista: bordes gruesos, sombras marcadas y tipografía en negrita.

Recurre a este componente cuando:

Vistazos de perfil — pasa el puntero sobre una @mención o un avatar para mostrar la biografía, las estadísticas y un botón de seguir.
Vistas previas de enlaces — muestra el título y el resumen de una página antes de que el lector se decida a hacer clic.
Términos de glosario — define la jerga directamente en la documentación sin navegar a otra página.

Instalación


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

Instala las siguientes dependencias:


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

Copia y pega el siguiente código en tu proyecto.

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 }

Actualiza las rutas de importación según la configuración de tu proyecto.

Uso

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

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

Composición

Usa la siguiente composición para construir un HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Retardos de activación

Usa delay y closeDelay en el disparador para controlar cuándo se abre y se cierra la tarjeta.

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

Posicionamiento

Usa las props side y align de HoverCardContent para controlar la ubicación.

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

Ejemplos

Básico

import {
  Avatar,
  AvatarFallback,

Lados

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

RTL

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import {

Accesibilidad

Las hover cards no tienen un patrón WAI-ARIA propio: el análogo más cercano es el patrón Tooltip. La primitiva de Base UI abre la tarjeta al enfocar el disparador con el teclado y la cierra con Escape. Aun así, trata el contenido como complementario para los usuarios videntes y mantén el disparador como un enlace real para que el contenido completo siga siendo alcanzable en su destino.

Interacciones de teclado:

Tecla	Acción
`Tab` / `Shift + Tab`	Mueve el foco al disparador: al enfocarlo se abre la tarjeta y al salir se cierra
`Escape`	Cierra la tarjeta
`Enter`	Sigue el enlace del disparador

Referencia de API

Consulta la documentación de Base UI para obtener más información.