Avatar
An image element with a fallback for representing a user or entity.
CN
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/avatar.jsonUsage
Use avatar to represent a user or entity, such as in a profile header, comment, or member list.
AvatarFallback renders automatically while the image loads or if it fails, so always provide
one — typically the user's initials.
<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
</script>
<template>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</template>
Built on reka-ui's Avatar.