Avatar

Une image de profil avec un repli sur les initiales.

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

CNUO

avatar.tsx

'use client';import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';export default function Demo() {  return (    <div className="flex gap-3">      <Avatar>        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />        <AvatarFallback>CN</AvatarFallback>      </Avatar>      <Avatar>        <AvatarFallback>UO</AvatarFallback>      </Avatar>    </div>  );}

Animation

L'image apparaît en fondu (180 ms) une fois chargée, au lieu de surgir.

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 avatar

Ou depuis le paquet npm :

import { Avatar } from '@whoa-studio/ui/avatar';

Exports : Avatar, AvatarImage, AvatarFallback.