shadcn.io is an independent project built on shadcn/ui
A round photo is on screen. The initials CN are the fallback, shown only if that picture is missing or fails.
Use it in profiles, comments, and member lists, anywhere a person needs a face. A status word can sit in a Badge beside the name. In Svelte, Ark UI does not fetch the photo.
Installation
Anatomy
Usage
<Avatar><AvatarImage alt="@shadcn" height={32} src="https://github.com/shadcn.png" width={32} /><AvatarFallback>CN</AvatarFallback></Avatar>FAQ
When do the initials show?
AvatarFallback sits next to AvatarImage and shows when the image is missing or fails to load. This file puts the letters CN there. The muted background comes from the avatar styles.
What alt text should the photo use?
AvatarImage takes alt. Use the person's name. When that name is already written next to the avatar, an empty alt keeps it from being read twice.
How big is this avatar, and how do I change it?
size is left at the default, and the image sets width and height to 32 so the photo matches the circle. size also accepts sm and lg, and the fallback text scales with it.
Where does the round shape come from?
The avatar styles set rounded-full on Avatar, the image, the fallback, and the hairline after: border. This file doesn't pass a radius.
API Reference
Avatar
Sets alt="@shadcn", height={32}, src="https://github.com/shadcn.png" and width={32}. The rest is on the Avatar page.
