║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Avatar description: Default rounded avatar that can show your users profile picture. ✨ lastUpdated: 12 Oct, 2024 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Avatar.tsx

<ComponentShowcase name="avatar-style-circle" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/avatar" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install @radix-ui/react-avatar

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="avatar" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Size variants

<ComponentShowcase name="avatar-style-circle-sizes" /> <br /> <br />

Fallbacks

Fallbacks are helpfull when there ia an error loading the src of the avatar. You can set fallbacks with Avatar.Fallback component.

<br /> <ComponentShowcase name="avatar-style-circle-fallbacks" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║