export const title = "Avatar components"
export const description = "Free and open-source React avatar components built for modern applications and websites. These avatars are built using React Aria and styled with Tailwind CSS."
export const links = {
github: "https://github.com/untitleduico/react/tree/main/components/base/avatar",
}
import * as Demos from "@/components/base/avatar/avatar.demo.tsx";
## Installation
You can add this avatar component using our CLI or manually:
```bash
npx untitledui@latest add avatar
```
Copy the files below into your project:
Great! Now you can start using the avatar components in your project by just copy/pasting our examples below.
## Avatar examples
Below are examples and variations of this avatar component:
### Avatar {{ tocOnly:true }}
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### Border
Use the `border` boolean prop to add an outer border around the avatar, helping it stand out against busy or low-contrast backgrounds.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### 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`.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### 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.
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
import { AvatarCompanyIcon } from "@/components/base/avatar/base-components";
}
/>
```
### 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.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### 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.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### Initials
Similar to the placeholder, you can also use the `initials` prop to display the user's initials when no image is available.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
```
### 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.
### 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.
```jsx
import { Avatar } from "@/components/base/avatar/avatar";
import { AvatarAddButton } from "@/components/base/avatar/base-components";
```
### Profile photo {{ tocOnly:true }}
```jsx
import { AvatarProfilePhoto } from "@/components/base/avatar/avatar";
```
### 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.
```jsx
import { AvatarProfilePhoto } from "@/components/base/avatar/avatar";
```
### 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.
```jsx
import { AvatarProfilePhoto } from "@/components/base/avatar/avatar";
```