Our React Avatar component is used to represent people or objects in your web projects. The avatar component usually displays a profile picture or a placeholder graphic if no image is available. Commonly places for avatars include: user profiles, comment sections, user lists, and anywhere else where a visual representation of a user is needed.
To jumpstart your development process, we offer a range of pre-designed Avatar examples that are ready to be integrated into your project. All our examples are based on React and styled with Tailwind CSS.
Get started with this simple avatar example that comes with a pre-set image, ensuring that your avatars look great from the start. You can easily replace the default src with any image URL to display user-specific avatars.
"use client";
import { Avatar } from "@material-tailwind/react";
Also, use the alt tag, set as "profile-picture", to make sure that the component is accessible. This feature is essential for screen readers, search engine optimization, and aligns with web accessibility standards
We provides different avatar variants like circular, rounded, and square so you can adapt it easily to your needs. You can simply use the variant prop to change the avatar variant.
In the example below, we've showcased the different avatar variants that you can use in your project.
"use client";
import { Avatar } from "@material-tailwind/react";
export function AvatarVariants() {
return (
<div className="item-center flex gap-2">
<Avatar
shape="circular"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
<Avatar
shape="rounded"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
<Avatar
shape="square"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
</div>
);
}
"use client";
import { Avatar } from "@material-tailwind/react";
export function AvatarVariants() {
return (
<div className="item-center flex gap-2">
<Avatar
shape="circular"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
<Avatar
shape="rounded"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
<Avatar
shape="square"
src="https://dub.sh/TdSBP0D"
alt="profile-picture"
/>
</div>
);
}
As showcased in the example above, here are the avatar component variants:
circular variant (default) - perfect for social media platforms, forums, and chat applications.
rounded variant - can be used in business applications, professional networks, or team collaboration tools.
square variant - ideal for corporate environments, document management systems, or platforms where a more serious tone is preferred.
We provide different avatar sizes like xs, sm, md, lg, xl and xxl so you can adapt it easily to your needs. You can simply use the size prop to change the avatar size.
In the example below, we've showcased the different avatar sizes that you can use in your project.
"use client";
import { Avatar } from "@material-tailwind/react";
You can use avatar with other components as well, see the example below. This component showcases a combination of Avatar and Typography components to create a complete user profile presentation.
Tania Andrew
Web Developer
Tania Andrew
Web Developer
Tania Andrew
Web Developer
"use client";
import { Avatar, Typography } from "@material-tailwind/react";
Use this example of overlapped avatars to represent a group of users in a friendly and compact way. For example, showing multiple people involved in a team.
"use client";
import { Avatar } from "@material-tailwind/react";
You can use the className prop to customize the Avatar component style and make your own custom avatar. In the example below, we've showcased how to create custom avatar with green border and ring around it.
"use client";
import { Avatar } from "@material-tailwind/react";
