Tailwind CSS Avatar - React

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.

Avatar Examples

Default Avatar

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.

import { Avatar } from "@material-tailwind/react";
 
export function AvatarDefault() {
  return <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />;
}

Also, use the alt tag, set as "avatar", to make sure that the component is accessible. This feature is essential for screen readers, search engine optimization, and aligns with web accessibility standards

Avatar Variants

The Avatar component comes with 3 different variants that you can change using the variant prop.

import { Avatar } from "@material-tailwind/react";
 
export function AvatarVariants() {
  return (
    <div className="flex gap-4">
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="rounded" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="square" />
    </div>
  );
}

As showcased in the example above, here are the avatar component variants:

ִ• default (circular) variant - 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.

Avatar Sizes

The Avatar component comes with 6 different sizes that you can change it using the size prop: extra-small (xs), small (sm), medium (md), large (lg), extra-large (xl), and double extra-large (XXL).

import { Avatar } from "@material-tailwind/react";
 
export function AvatarSizes() {
  return (
    <div className="flex w-max items-end gap-4">
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xs" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="sm" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="md" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="lg" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xl" />
      <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xxl" />
    </div>
  );
}

This range provides great flexibility, allowing the avatars to fit perfectly in diverse contexts.

Avatar with border

Add an extra layer of visual appeal to your avatar with this example. You can add a border around the avatar using the withBorder prop. To change the color of the avatar border use the color prop, by default it's gray.

import { Avatar } from "@material-tailwind/react";
 
export function AvatarWithBorder() {
  return (
    <div className="flex gap-4">
      <Avatar
        src="https://docs.material-tailwind.com/img/face-2.jpg"
        alt="avatar"
        withBorder={true}
        className="p-0.5"
      />
      <Avatar
        src="https://docs.material-tailwind.com/img/face-2.jpg"
        alt="avatar"
        variant="rounded"
        withBorder={true}
        color="green"
        className="p-0.5"
      />
      <Avatar
        src="https://docs.material-tailwind.com/img/face-2.jpg"
        alt="avatar"
        variant="square"
        withBorder={true}
        color="pink"
        className="p-0.5"
      />
    </div>
  );
}

Avatar with Text

You can use avatar with other components as well, see the example below. This component showcases a combination of avatars and typography elements to create a complete user profile presentation.

Tania Andrew

Web Developer

Tania Andrew

Web Developer

Tania Andrew

Web Developer

import { Avatar, Typography } from "@material-tailwind/react";
 
export function AvatarWithText() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-4">
        <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />
        <div>
          <Typography variant="h6">Tania Andrew</Typography>
          <Typography variant="small" color="gray" className="font-normal">
            Web Developer
          </Typography>
        </div>
      </div>
      <div className="flex items-center gap-4">
        <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="rounded" />
        <div>
          <Typography variant="h6">Tania Andrew</Typography>
          <Typography variant="small" color="gray" className="font-normal">
            Web Developer
          </Typography>
        </div>
      </div>
      <div className="flex items-center gap-4">
        <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="square" />
        <div>
          <Typography variant="h6">Tania Andrew</Typography>
          <Typography variant="small" color="gray" className="font-normal">
            Web Developer
          </Typography>
        </div>
      </div>
    </div>
  );
}

Avatar Stack

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.

import { Avatar } from "@material-tailwind/react";
 
export function AvatarStack() {
  return (
    <div className="flex items-center -space-x-4">
      <Avatar
        variant="circular"
        alt="user 1"
        className="border-2 border-white hover:z-10 focus:z-10"
        src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
      />
      <Avatar
        variant="circular"
        alt="user 2"
        className="border-2 border-white hover:z-10 focus:z-10"
        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80"
      />
      <Avatar
        variant="circular"
        alt="user 3"
        className="border-2 border-white hover:z-10 focus:z-10"
        src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80"
      />
      <Avatar
        variant="circular"
        alt="user 4"
        className="border-2 border-white hover:z-10 focus:z-10"
        src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
      />
      <Avatar
        variant="circular"
        alt="user 5"
        className="border-2 border-white hover:z-10 focus:z-10"
        src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80"
      />
    </div>
  );
}

Avatar with Dot Indicator

import { Avatar, Badge } from "@material-tailwind/react";
 
export function AvatarWithDotIndicator() {
  return (
    <div className="flex gap-4">
      <Badge placement="top-end" overlap="circular" color="green" withBorder>
        <Avatar
          src="https://docs.material-tailwind.com/img/face-2.jpg"
          alt="avatar"
        />
      </Badge>
      <Badge placement="top-end" color="green" withBorder>
        <Avatar
          src="https://docs.material-tailwind.com/img/face-2.jpg"
          alt="avatar"
          variant="rounded"
        />
      </Badge>
      <Badge placement="bottom-end" overlap="circular" color="red" withBorder>
        <Avatar
          src="https://docs.material-tailwind.com/img/face-2.jpg"
          alt="avatar"
        />
      </Badge>
      <Badge placement="bottom-end" color="red" withBorder>
        <Avatar
          src="https://docs.material-tailwind.com/img/face-2.jpg"
          alt="avatar"
          variant="rounded"
        />
      </Badge>
    </div>
  );
}

import React from "react";
import {
  Avatar,
  Button,
  Menu,
  MenuHandler,
  MenuItem,
  MenuList,
  Typography,
} from "@material-tailwind/react";
import {
  Cog6ToothIcon,
  InboxArrowDownIcon,
  LifebuoyIcon,
  PowerIcon,
  UserCircleIcon,
} from "@heroicons/react/24/solid";
 
// profile menu component
const profileMenuItems = [
  {
    label: "My Profile",
    icon: UserCircleIcon,
  },
  {
    label: "Edit Profile",
    icon: Cog6ToothIcon,
  },
  {
    label: "Inbox",
    icon: InboxArrowDownIcon,
  },
  {
    label: "Help",
    icon: LifebuoyIcon,
  },
  {
    label: "Sign Out",
    icon: PowerIcon,
  },
];
 
export function AvatarWithUserDropdown() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
  const closeMenu = () => setIsMenuOpen(false);
 
  return (
    <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
      <MenuHandler>
        <Button
          variant="text"
          color="blue-gray"
          className="flex items-center rounded-full p-0"
        >
          <Avatar
            variant="circular"
            size="md"
            alt="tania andrew"
            withBorder={true}
            color="blue-gray"
            className=" p-0.5"
            src="https://docs.material-tailwind.com/img/face-2.jpg"
          />
        </Button>
      </MenuHandler>
      <MenuList className="p-1">
        {profileMenuItems.map(({ label, icon }, key) => {
          const isLastItem = key === profileMenuItems.length - 1;
          return (
            <MenuItem
              key={label}
              onClick={closeMenu}
              className={`flex items-center gap-2 rounded ${
                isLastItem
                  ? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10"
                  : ""
              }`}
            >
              {React.createElement(icon, {
                className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`,
                strokeWidth: 2,
              })}
              <Typography
                as="span"
                variant="small"
                className="font-normal"
                color={isLastItem ? "red" : "inherit"}
              >
                {label}
              </Typography>
            </MenuItem>
          );
        })}
      </MenuList>
    </Menu>
  );
}

Avatar with Custom Styles

You can use the className prop to add custom styles to the Avatar component. Like in the example below - apply a border with border-green-500 for a pop of color and layered shadows shadow-xl shadow-green-900/20 for depth, creating a striking visual effect.

import { Avatar } from "@material-tailwind/react";
 
export function AvatarCustomStyles() {
  return (
    <Avatar
      size="lg"
      alt="avatar"
      src="https://docs.material-tailwind.com/img/face-2.jpg"
      className="border border-green-500 shadow-xl shadow-green-900/20 ring-4 ring-green-500/30"
    />
  );
}

Avatar Props

The following props are available for the avatar component. These are the custom props that we've added for the avatar component and you can use all the other native image props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change avatar variant	`circular`
`size`	Size	Change avatar size	`md`
`color`	Color	Change avatar border color	`gray`
`className`	`string`	Add custom className for avatar	`''`
`withBorder`	`boolean`	Add 2px border around the avatar	`false`

For TypeScript Only

Our avatar component is Typescript friendly. Use this to make sure that the correct prop types are passed to the component.

import type { AvatarProps } from "@material-tailwind/react";

Types - Variant

Set of predefined styling variants available for our React and Tailwind CSS Avatar component.

type variant = "rounded" | "circular";

Types - Size

Check out Material Tailwind’s set of predefined sizes available for the Avatar component.

type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

Types - Color

Set of predefined colors available for our Avatar component. Choose from our extensive 20+ list of colors like: orange, brown, amber, yellow, blue, etc. Customize the component to fit your web project's needs.

type color =
  | "white"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Avatar Theme

Learn how to customize the theme and styles for avatar component, the theme object for avatar component has three main objects:

1. The defaultProps object for setting up the default value for props of avatar component.
2. The valid object for customizing the valid values for avatar component props.
3. The styles object for customizing the theme and styles of avatar component.

You can customize the theme and styles of avatar component by adding Tailwind CSS classes as key paired values for objects.

Avatar Theme Object Type

interface AvatarStyleTypes {
  defaultProps: {
    variant: string;
    size: string;
    className: string;
    withBorder: boolean;
    color: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      initial: object;
      withBorder: object;
    };
    sizes: {
      xs: object;
      sm: object;
      md: object;
      lg: object;
      xl: object;
      xxl: object;
    };
    variants: {
      square: object;
      rounded: object;
      circular: object;
    };
    borderColor: object;
  };
}

For TypeScript Only

import type { AvatarStyleTypes } from "@material-tailwind/react";

Avatar Theme Customization

const theme = {
  avatar: {
    defaultProps: {
      variant: "circular",
      size: "md",
      className: "",
      withBorder: false,
      color: "blue",
    },
    valid: {
      variants: ["circular", "rounded", "square"],
      sizes: ["xs", "sm", "md", "lg", "xl", "xxl"],
      colors: [
        "white",
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        initial: {
          display: "inline-block",
          position: "relative",
          objectFit: "object-cover",
          objectPosition: "object-center",
        },
        withBorder: {
          border: "border-2",
        },
      },
      sizes: {
        xs: {
          width: "w-6",
          height: "h-6",
          borderRadius: "rounded-md",
        },
        sm: {
          width: "w-9",
          height: "h-9",
          borderRadius: "rounded-md",
        },
        md: {
          width: "w-12",
          height: "h-12",
          borderRadius: "rounded-lg",
        },
        lg: {
          width: "w-[58px]",
          height: "h-[58px]",
          borderRadius: "rounded-lg",
        },
        xl: {
          width: "w-[74px]",
          height: "h-[74px]",
          borderRadius: "rounded-xl",
        },
        xxl: {
          width: "w-[110px]",
          height: "h-[110px]",
          borderRadius: "rounded-2xl",
        },
      },
      variants: {
        rounded: {},
        square: {
          borderRadius: "!rounded-none",
        },
        circular: {
          borderRadius: "!rounded-full",
        },
      },
      borderColor: {
        white: {
          borderColor: "border-white",
        },
        "blue-gray": {
          borderColor: "border-blue-gray-500",
        },
        gray: {
          borderColor: "border-gray-500",
        },
        brown: {
          borderColor: "border-brown-500",
        },
        "deep-orange": {
          borderColor: "border-deep-orange-500",
        },
        orange: {
          borderColor: "border-orange-500",
        },
        amber: {
          borderColor: "border-amber-500",
        },
        yellow: {
          borderColor: "border-yellow-500",
        },
        lime: {
          borderColor: "border-lime-500",
        },
        "light-green": {
          borderColor: "border-light-green-500",
        },
        green: {
          borderColor: "border-green-500",
        },
        teal: {
          borderColor: "border-teal-500",
        },
        cyan: {
          borderColor: "border-cyan-500",
        },
        "light-blue": {
          borderColor: "border-light-blue-500",
        },
        blue: {
          borderColor: "border-blue-500",
        },
        indigo: {
          borderColor: "border-indigo-500",
        },
        "deep-purple": {
          borderColor: "border-deep-purple-500",
        },
        purple: {
          borderColor: "border-purple-500",
        },
        pink: {
          borderColor: "border-pink-500",
        },
        red: {
          borderColor: "border-red-500",
        },
      },
    },
  },
};

Tailwind CSS Avatar - React

Avatar Examples

Default Avatar

Avatar Variants

Avatar Sizes

Avatar with border

Avatar with Text

Tania Andrew

Tania Andrew

Tania Andrew

Avatar Stack

Avatar with Dot Indicator

Avatar with User dropdown

Avatar with Custom Styles

Avatar Props

For TypeScript Only

Types - Variant

Types - Size

Types - Color

Avatar Theme

Avatar Theme Object Type

For TypeScript Only

Avatar Theme Customization