Avatar

Vue avatar component for user profile images with fallback initials or placeholders when media fails.

Show code

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/avatar.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/avatar.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/avatar.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/avatar.json

Usage

      
      <script setup lang="ts">
import { Avatar } from "@/components/ui/avatar";
</script>

<template>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/fontanaen.png" alt="CN" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
</template>

Composition

      
      Avatar.Group
└── Avatar.Root
    ├── Avatar.Fallback
    └── Avatar.Image

Avatar.Root
├── Avatar.Context
├── Avatar.Fallback
├── Avatar.Image
├── Avatar.RootProvider

Examples

Sizes

Use the size prop on Avatar.Root to change the size of the avatar.

Show code

Group

Stack multiple avatars using Avatar.Group. Apply negative spacing and ring utilities on each Avatar.Root to create an overlapping effect.

Show code

API

See Ark UI Avatar docs for full props and examples.

Avatar.Root

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the avatar
`class`	`string`	—	Additional CSS classes

Avatar.Group

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the group
`class`	`string`	—	Additional CSS classes

Autocomplete Badge