Avatar

Data display

Identifies a person or entity with an image, fallback content, or a grouped set of avatars.

React · copy into your project · light and dark themes

Try it

Variant

Size

SKAMJLLoading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/avatar.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Using avatar

Place AvatarImage and AvatarFallback inside Avatar to handle image loading with initials or other fallback content.
Use AvatarGroup for a small collection and AvatarMore for a visible remaining count.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

AvatarProps

Prop	Type	Required
`variant`	`"default" \| "pink" \| "yellow" \| "blue" \| "olive" \| "square" \| "ink" \| "sm" \| null \| undefined`	No
`size`	`"default" \| "lg" \| null \| undefined`	No

AvatarGroupProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarWrapperProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarEditProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarHexProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarHexGroupProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarMoreProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No

AvatarImageProps

Accepts the native or primitive props declared by its exported TypeScript type.

AvatarFallbackProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

Give meaningful images descriptive alt text; use empty alt text when adjacent text already identifies the person.
Ensure fallback initials and grouped counts have enough surrounding context to identify their meaning.

States and appearance

resthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.