Avatar components
FREEFree and open-source React avatar components built for modern applications and websites. These avatars are built using React Aria and styled with Tailwind CSS.
Olivia Rhye
Installation
You can add this avatar component using our CLI or manually:
npx untitledui add avatar
Avatar examples
Below are examples and variations of this avatar component:
Status indicator
Status indicators are a common way to show the online or offline status of a user or connection. They can be used to indicate whether a user is online or offline.
Our avatar component provides a status prop that allows you to easily add status indicators to your avatars. The status prop accepts the following values: online and offline.
Company logo
Company logos or avatar badges are another way to add additional information to your avatars. They can be used to display the company logo, the user's role, or any other information you want to display.
Our avatar component provides a badge prop that allows you to easily add company logos to your avatars. The badge prop accepts a React node and will be displayed in the top-right corner of the avatar. We recommend using the AvatarCompanyIcon component to easily add a company logo with predefined styles and sizes to your avatars.
Verified badge
Verified badges are quite common in any modern application. They indicate whether a user is verified and trustworthy.
Our avatar component provides a verified boolean prop that allows you to easily add styled verified badges to your avatars.
Placeholder
Avatar components should be built with common edge cases in mind. For example, what should happen if a user has no avatar, or if the provided image has failed to load?
Our avatar components are designed to be robust and handle common edge cases. For example, if no image is provided, or if the image fails to load, the component will automatically display a placeholder icon.
To change the placeholder, you can use the placeholder and placeholderIcon props. You can pass an icon (e.g., any icon from @untitledui/icons) to the placeholderIcon prop, and it will be displayed in the center of the avatar with matching styles. If you would like something more custom, you can also pass a React node to the placeholder prop.
Initials
Similar to the placeholder, you can also use the initials prop to display the user's initials when no image is available.
Label group
Avatar label groups are a great way to display additional information about a user. They can be used to display the user's name, email, and any other information you want to display.
Olivia Rhye
Olivia Rhye
Olivia Rhye
Olivia Rhye
Group
Group avatars are also quite common in modern applications. They can be used to display a group of users or entities that belong to the same group.
To build a group of avatars, you can easily use our Avatar and AvatarAddButton components. Just place them in a flex container with appropriate spacing and you're good to go.
Profile photo placeholder
Profile photo placeholders function the same way as the regular placeholder in our Avatar component. They will be displayed if no image is provided, or if the image fails to load.
Profile photo initials
Profile photo initials function the same way as the regular initials in our Avatar component. They will be displayed if no image is provided, or if the image fails to load.
FAQs
Please refer to our frequently asked questions page for more.
The Avatar component automatically handles image loading failures by displaying fallback content. You can customize this fallback behavior using the initials prop to show user initials, the placeholderIcon prop to display a custom icon, or the placeholder prop for any custom React element.
Yes, you can display a user's online status by using the status prop with values "online" or "offline". This will add a status indicator dot to the bottom-right corner of the avatar.
Yes, you can add badges or indicators to avatars using the badge prop, which accepts React elements. This is useful for displaying company logos, verification status, or other important information. You can also use the verified prop to show a verification tick icon.
You can control the size of avatars using the size prop, which accepts values "xxs", "xs", "sm", "md", "lg", "xl", and "2xl". The default size is "md". This allows you to use appropriately sized avatars in different contexts of your application.