Vibe UI
Initializing Vibe UI System...
Vibe UI

Avatar

An image element with a fallback for representing the user.

Avatar

An image element with a fallback for representing the user.

Preview

UI

Installation

pnpm dlx vibe-ui-kit@latest add avatar

1. Styles & Variations

Presets

DFGLRT

Sizes

XSMDLGXL

Accents

ST
RT

AV

PR
NM
▲

2. Composition & Groups

Badges & Status

AC
AL

4

Group Stacks

U1U2U3

+4

J1J2

Cards & Popovers

SV

Sarah Vance Pro

sarah.vance@vibe.dev
BS
SVBSCD

+12

SV
Sarah Glass
Developer Console

3. Real-World Use Cases

AL
Alex Morgan
In #general

LIVE

MA
Marcus Chen
marcus@vibe.dev
Pro
3 Live
E1E2E3
EL

Elena Rostova

@elena · 2h
DV
David Miller
Verified Buyer
★★★★★

"The component quality and theme tokens are top tier."

App RedesignIn Progress
U1U2
8/12 Tasks

AI

Vibe Agent
AI Assistant
v4.5
GM
CyberKnight
Rank #14 · 94% Win

READY

Props

PropTypeDefaultDescription
variant"default" | "glass" | "retro" | "glow""default"Visual preset theme variant of the avatar container.
asChildbooleanfalseChange the underlying component to the child element.
PropTypeDefaultDescription
srcstring-The image source URL to load.
altstring-Accessible alternative text description for the image.
onLoadingStatusChange(status: "idle" | "loading" | "loaded" | "error") => void-Event handler called when the loading status of the image changes.
PropTypeDefaultDescription
delayMsnumber0Delay in milliseconds before displaying the fallback element.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Avatar | Vibe UI