edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Avatar

Premium solid avatar with image loading, fallback delay, render composition, and state-aware styling.

Componentsdocsbase-ui/avatar

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/avatar.json

Manual

API Reference

Root

Displays a profile image, initials, or fallback icon. Renders a span element and exposes image loading state.

classNamestring | function

CSS class name or state function receiving Avatar.Root.State.

styleReact.CSSProperties | function

Inline style object or state function receiving Avatar.Root.State.

renderReactElement | function

Custom render element or render function for composition.

Image

The avatar image. Renders an img element after it loads successfully.

srcstring

Image URL

altstring

Alt text

onLoadingStatusChange(status: ImageLoadingStatus) => void

Callback fired when the image loading status changes.

classNamestring | function

CSS class name or state function receiving Avatar.Image.State.

styleReact.CSSProperties | function

Inline style object or state function receiving Avatar.Image.State.

renderReactElement | function

Custom render element or render function for composition.

Fallback

Displayed when the image fails to load or no image is provided. Renders a span element.

delaynumber

Milliseconds to wait before showing the fallback.

classNamestring | function

CSS class name or state function receiving Avatar.Fallback.State.

styleReact.CSSProperties | function

Inline style object or state function receiving Avatar.Fallback.State.

renderReactElement | function

Custom render element or render function for composition.