@chakra-ui/avatar

What is @chakra-ui/avatar?

@chakra-ui/avatar is a component library for creating avatars in React applications. It provides a simple and flexible way to display user profile pictures, initials, or fallback icons when no image is available.

What are @chakra-ui/avatar's main functionalities?

Basic Avatar

This feature allows you to create a basic avatar with a name and an image source. If the image source is provided, it will display the image; otherwise, it will display the initials of the name.

import { Avatar } from '@chakra-ui/avatar';

function BasicAvatar() {
  return <Avatar name='John Doe' src='https://bit.ly/dan-abramov' />;
}

Avatar with Fallback

This feature allows you to create an avatar that displays the initials of the name if no image source is provided.

import { Avatar } from '@chakra-ui/avatar';

function AvatarWithFallback() {
  return <Avatar name='John Doe' />;
}

Avatar Group

This feature allows you to create a group of avatars. You can specify the maximum number of avatars to display, and the rest will be shown as a count.

import { Avatar, AvatarGroup } from '@chakra-ui/avatar';

function AvatarGroupExample() {
  return (
    <AvatarGroup size='md' max={2}>
      <Avatar name='Ryan Florence' src='https://bit.ly/ryan-florence' />
      <Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />
      <Avatar name='Kent Dodds' src='https://bit.ly/kent-c-dodds' />
      <Avatar name='Prosper Otemuyiwa' src='https://bit.ly/prosper-baba' />
    </AvatarGroup>
  );
}

Other packages similar to @chakra-ui/avatar

react-avatar

react-avatar is a library for creating avatars in React applications. It supports various types of avatars, including images, initials, and fallback icons. Compared to @chakra-ui/avatar, react-avatar offers more customization options for avatar shapes and background colors.

material-ui

Material-UI is a popular React component library that includes an Avatar component. It provides a wide range of customization options and integrates well with other Material-UI components. While @chakra-ui/avatar focuses on simplicity and ease of use, Material-UI offers a more comprehensive set of UI components.

react-user-avatar

react-user-avatar is a lightweight library for creating user avatars in React applications. It supports displaying user initials and fallback icons. Compared to @chakra-ui/avatar, react-user-avatar is more minimalistic and focuses solely on avatar functionality.

README

@chakra-ui/avatar

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

Installation

yarn add @chakra-ui/avatar

# or

npm i @chakra-ui/avatar

Import components

import { Avatar, AvatarGroup } from "@chakra-ui/avatar"

Basic Usage

Simply import the Avatar component and pass it the image src and name of the user in the avatar.

<Avatar src="john-doe.png" name="John doe" />

Stack Avatars in a group by using the AvatarGroup component

<AvatarGroup size="md" max={2}>
  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
  <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
</AvatarGroup>