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.

import { Avatar } from "@material-tailwind/react";
 
export default function Example() {
  return <Avatar src="/img/face-2.jpg" />;
}

Avatar Variants

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

import { Avatar } from "@material-tailwind/react";
 
export default function Variants() {
  return (
    <div className="flex gap-4">
      <Avatar src="/img/face-2.jpg" />
      <Avatar src="/img/face-2.jpg" variant="circular" />
    </div>
  );
}

Avatar Sizes

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

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

Props

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

Attribute	Type	Description	Default
`variant`	Variant	Change avatar variant	`rounded`
`size`	Size	Change avatar size	`md`
`className`	`string`	Add custom className for avatar	`''`

Types

type variant = "rounded" | "circular";

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

alert

breadcrumbs

Edit this page on Github