Hover Card

Un aperçu affiché au survol d’un lien.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

hover-card.tsx

'use client';import { Button } from '@/components/ui/button';import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';export default function Demo() {  return (    <HoverCard>      <HoverCardTrigger render={<Button variant="link" />}>@ugolin</HoverCardTrigger>      <HoverCardContent>Full-stack developer. Hover to preview.</HoverCardContent>    </HoverCard>  );}

Animation

La carte grandit depuis son déclencheur en 180 ms.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add hover-card

Ou depuis le paquet npm :

import { HoverCard } from '@whoa-studio/ui/hover-card';

Exports : HoverCard, HoverCardTrigger, HoverCardContent.