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 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" alt="avatar" />
      <Avatar src="/img/face-2.jpg" alt="avatar" 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 w-max items-end gap-4">
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xs" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="sm" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="md" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="lg" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xl" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xxl" />
    </div>
  );
}

Props

Learn more about props definition and types of avatar component.

Theme

Learn how to customize the theme and styles for avatar component.

alert

breadcrumbs

Edit this page on Github

Tailwind CSS Avatar - React

Avatar Variants

Avatar Sizes

Related

Props

Theme