AvatarAn image element with a fallback for representing the user.Copy Pagenpx vibe-ui-kit add avatarAvatar An image element with a fallback for representing the user. Preview PreviewCodeUI InstallationCommandManualpnpmnpxyarnbunpnpm dlx vibe-ui-kit@latest add avatar 1. Styles & Variations Presets PreviewCodeDFGLRT Sizes PreviewCodeXSMDLGXL Accents PreviewCodeSTRTAVPRNM▲ 2. Composition & Groups Badges & Status PreviewCodeACAL4 Group Stacks PreviewCodeU1U2U3+4J1J2 Cards & Popovers PreviewCodeSVSarah Vance Prosarah.vance@vibe.devBSSVBSCD+12SVSarah GlassDeveloper Console 3. Real-World Use Cases PreviewCodeALAlex MorganIn #generalLIVEMAMarcus Chenmarcus@vibe.devPro3 LiveE1E2E3ELElena Rostova@elena · 2hFollowDVDavid MillerVerified Buyer★★★★★"The component quality and theme tokens are top tier."App RedesignIn ProgressU1U28/12 TasksAIVibe AgentAI Assistantv4.5GMCyberKnightRank #14 · 94% WinREADY Props PropTypeDefaultDescriptionvariant"default" | "glass" | "retro" | "glow""default"Visual preset theme variant of the avatar container.asChildbooleanfalseChange the underlying component to the child element. PropTypeDefaultDescriptionsrcstring-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. PropTypeDefaultDescriptiondelayMsnumber0Delay in milliseconds before displaying the fallback element. PreviousAspect RatioNext BadgeRelated Vibe UI ComponentsExplore all components →ComponentsVibe UI ButtonView docs ComponentsVibe UI Button GroupView docs ComponentsVibe UI CalendarView docs ContributorsJSJenish Sabhadiya