9.7k

Avatar

PreviousNext

An image element with a fallback for representing the user.

Docs API Reference
WDUIKit
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VAvatar,
  VAvatarFallback,
} from '@ui-kit/src/components/Base/VAvatar'
</script>

<template>
  <div class="flex items-center gap-4">
    <VAvatar size="small">
      <VAvatarFallback>WD</VAvatarFallback>
    </VAvatar>
    <VAvatar>
      <VAvatarFallback>UI</VAvatarFallback>
    </VAvatar>
    <VAvatar size="large">
      <VAvatarFallback>Kit</VAvatarFallback>
    </VAvatar>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add avatar

Usage

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>
Aspect RatioBadge