Avatar

A circular avatar component with image display and fallback support for initials or icons.

Default

Avatar displays an image with automatic fallback to initials when the image is unavailable.

JDAB

Sizes

Three size variants keep avatar dimensions consistent: sm (1.5rem), default (2rem), and lg (2.5rem).

SMMDLG

Installation

npx visor add avatar

This copies two files into your project:

components/ui/avatar/avatar.tsx — the component
components/ui/avatar/avatar.module.css — the styles

Usage

import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar/avatar';

<Avatar>
  <AvatarImage src="/profile.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

API Reference

AvatarProps

No props data available for “avatar”.

Sub-components

Component	Purpose
`Avatar`	Root container with size variants
`AvatarImage`	Image element with object-fit cover
`AvatarFallback`	Centered fallback content shown when the image is unavailable