🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Avatar

An image component for displaying user profile pictures with fallback states

Image

Initials

Fallback

Installation

The Avatar component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Avatar component into your React component.

import { Avatar } from 'reacui';

Avatar Sizes

The Avatar component comes in different sizes to fit your needs.

<Avatar size="xs" src="https://i.pravatar.cc/150?img=2" alt="Small avatar" />
<Avatar size="sm" src="https://i.pravatar.cc/150?img=3" alt="Medium avatar" />
<Avatar size="md" src="https://i.pravatar.cc/150?img=4" alt="Large avatar" />
<Avatar size="lg" src="https://i.pravatar.cc/150?img=5" alt="Extra large avatar" />

Avatar Variants

Customize the style of your avatars with different variants.

<Avatar initials="JD" variant="primary" />
<Avatar initials="TS" variant="secondary" />
<Avatar initials="AB" variant="success" />
<Avatar initials="CD" variant="danger" />

Avatar Fallback

Avatars can display a fallback when the image fails to load.

<Avatar src="invalid-image-url.jpg" fallback />
<Avatar src="invalid-image-url.jpg" fallback="initials" initials="EF" />

Avatar Group

Group multiple avatars together to represent a team or collection of users.

<Avatar.Group>
  <Avatar src="https://i.pravatar.cc/150?img=6" alt="Team member 1" />
  <Avatar src="https://i.pravatar.cc/150?img=7" alt="Team member 2" />
  <Avatar src="https://i.pravatar.cc/150?img=8" alt="Team member 3" />
  <Avatar.Counter count={3} />
</Avatar.Group>

API Reference

The following props are available for the Avatar components.

Component	Prop	Type	Default	Description
Avatar	src	string	-	The source URL of the avatar image.
	alt	string	''	Alt text for the avatar image.
	size	string	'md'	Size of the avatar: 'xs', 'sm', 'md', 'lg', 'xl'.
	variant	string	'secondary'	Color variant: 'primary', 'secondary', 'success', 'danger', etc.
	initials	string	-	Initials to display when no image is available.
	fallback	boolean \| string	false	Type of fallback to use when image fails to load.
Avatar.Group	max	number	-	Maximum number of avatars to display before showing the counter.
Avatar.Counter	count	number	0	Number of additional avatars to represent in the counter.