Tailwind CSS Avatar - React

Use our Tailwind CSS Avatar component to portray people or objects in your web projects. The Avatar can be used as a visual identifier for a user profile on your website.

See below our beautiful Avatar example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.


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

Avatar Variants

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

avataravataravatar
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>
  );
}

Avatar Sizes

The Avatar component comes with 6 different sizes that you can change it using the size prop.

avataravataravataravataravataravatar
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>
  );
}

Avatar with border

You can add 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.

avataravataravatar
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 example below.

avatar
Tania Andrew

Web Developer

avatar
Tania Andrew

Web Developer

avatar
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

user 1user 2user 3user 4user 5
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 Custom Styles

You can use the className prop to add custom styles to the Avatar component.

avatar
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 avatar component. These are the custom props that we've added for the avatar component and you can use all the other native img props as well.

AttributeTypeDescriptionDefault
variantVariantChange avatar variantcircular
sizeSizeChange avatar sizemd
colorColorChange avatar border colorgray
classNamestringAdd custom className for avatar''
withBorderbooleanAdd 2px border around the avatarfalse


For TypeScript Only

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

Types - Variant

type variant = "rounded" | "circular";

Types - Size

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

Types - Color

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:

A. The defaultProps object for setting up the default value for props of avatar component.
B. The valid object for customizing the valid values for avatar component props.
C. 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",
        },
      },
    },
  },
};