Avatars are a common element in user interfaces that display user profile pictures or initials. However, in some cases, it is necessary to display a group of avatars together, such as in a team or chat interface. Chakra UI, a popular React component library, provides an easy way to create avatar groups with just a few lines of code.

In this tutorial, we will walk through the process of creating avatar groups using Chakra UI and React. Let’s get started!

Installing Chakra UI

The first step is to install Chakra UI in your React project. You can install it via npm or yarn by running the following command:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Importing the Required Components

To create avatar groups, we need to import a few Chakra UI components in our React component. Open the file where you want to create the avatar group and import the necessary components as shown below:

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

Creating the Avatar Group

Next, we need to create the avatar group and populate it with individual avatar components. Within your component’s render method or functional component, create an AvatarGroup component and add Avatar components as children. Here’s an example:

function AvatarGroupExample() {
  return (
    <AvatarGroup size="md" max={3}>
      <Avatar name="John Doe" src="https://example.com/avatar1.jpg" />
      <Avatar name="Jane Smith" src="https://example.com/avatar2.jpg" />
      <Avatar name="Adam Johnson" src="https://example.com/avatar3.jpg" />
      <Avatar name="Emily Wilson" src="https://example.com/avatar4.jpg" />
    </AvatarGroup>
  );
}

In the example above, we are creating an AvatarGroup component and adding four Avatar components as children. We have specified the size prop as “md” to set the size of the avatars, and the max prop as 3 to limit the number of visible avatars (any additional avatars will be hidden).

Customizing the Avatar Group

Chakra UI provides a variety of properties and props to customize the appearance and behavior of the avatar group. You can explore the Chakra UI documentation to discover all available options, such as changing the size, border color, or adding tooltips.

Conclusion

In this tutorial, we have learned how to create avatar groups using Chakra UI and React. By leveraging the AvatarGroup and Avatar components, we can easily display a group of avatars in our user interface. Customize the appearance and behavior according to your needs using the various props provided by Chakra UI.

Start incorporating avatar groups into your React applications and create visually appealing user interfaces. Happy coding!

#React #ChakraUI