Get Started

Components

Avatars are found throughout material design with uses in everything from tables to dialog menus.

code

Expend code

<Avatar src="/images/logo.svg" alt="logo" />

<Avatar src="/images/logo.svg" alt="logo" />

code

Expend code


    <div className="flex space-x-2">
      <Avatar>A</Avatar>
      <Avatar className="bg-red-500">CF</Avatar>
    </div>


    <div className="flex space-x-2">
      <Avatar>A</Avatar>
      <Avatar className="bg-red-500">CF</Avatar>
    </div>

code

Expend code


    <Avatar className="bg-[#EF4444] ">
      <FolderIcon />
    </Avatar>


    <Avatar className="bg-[#EF4444] ">
      <FolderIcon />
    </Avatar>

the properties of the avatar component used to display the user's profile picture or icon.

Prop	Type	Default	Description
src	string	-	URL of the image to display on the avatar.
alt	string	-	Alternative text to display when the image does not load.
className	string	-	CSS class for additional styling.
children	React.ReactNode	-	If you don't have an image, include your initials or an icon to display within your avatar.