Avatar

atom

Circular user image with an automatic initials fallback when the image is absent or fails to load. Available in five sizes.

"Add an Avatar from lucent-ui for a user profile. Show the user's photo if available, falling back to their initials."

Usage

React / JSX

import { Avatar } from 'lucent-ui'

<Avatar alt="Jane Doe" size="md" />

pnpm add lucent-ui

Avatar props — * required

Prop	Type	Default	Description
`alt`*	`string`	`"Jane Doe"`	Alt text for the image. Also used to generate initials when src is missing.
`src`	`string`	—	Image URL. If not provided or fails to load, initials are shown.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Avatar diameter.