title

description

navigation

github

Tailwind CSS Avatar for React - Material Tailwind

Customise your web projects with our easy-to-use avatar component for Tailwind CSS and React using Material Design guidelines.

avatar

avatar-variants

avatar-sizes

avatar-with-border

avatar-with-text

avatar-stack

avatar-custom-styles

avatar-props

types-variant

types-size

types-color

avatar-theme

avatar-theme-object-type

avatar-theme-customization

avatar

alert

badge

# 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.

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 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",
        },
      },
    },
  },
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

avatar.mdx

avatar.mdx

Avatar Examples

For TypeScript Only

For TypeScript Only

Files

avatar.mdx

Latest commit

History

avatar.mdx

File metadata and controls

Avatar Examples

For TypeScript Only

For TypeScript Only