Avatar

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Avatar component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/avatar.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your avatar HTML

Add class="avatar" to a small inline container. Add data-size="sm" or data-size="lg" when needed. Put the image first and a fallback  after it. Add .avatar-badge for a status badge or badge icon.

<span class="avatar">
  <img src="/assets/images/avatar-1.png" alt="@shadcn" />
  <span>CN</span>
</span>

HTML structure

<div class="avatar-group"> Optional

Optional parent that groups avatars with overlap.

Avatar root. Use it standalone or as a direct child of .avatar-group. Add data-size="sm" or data-size="lg" for alternate sizes.

<img> Optional: The avatar image. Provide meaningful alt text.
: Fallback initials or icon.
 Optional: Status badge positioned at the block-end inline-end corner. It can be empty or contain an icon.

 Optional

Count or icon indicator displayed at the end of the group.

Examples

Basic

Badge

Badge with icon

Avatar group

Avatar group count

ER+3

Avatar group with icon

Sizes

CNCNCN

#Avatar

#Usage

Include CSS

Add your avatar HTML

#HTML structure

#Examples

#Basic

#Badge

#Badge with icon

#Avatar group

#Avatar group count

#Avatar group with icon

#Sizes

#Dropdown

#RTL