React Avatar - Flowbite
Use the avatar component to show user profile images and placeholders in different sizes, colors and shapes based on React and Tailwind CSS
The avatar component from Flowbite React can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.
All of the example are built as React components and you can access custom props and methods to customize the component and you can also use Tailwind CSS classes to style the component.
To start using the avatar component you need to import it from the flowbite-react package:
'use client';
import { Avatar } from 'flowbite-react';
Default avatar
Here's a default example of the <Avatar> component where you can use the img prop to pass the image URL, the alt prop to pass a description of the image for accessibility and the rounded prop to make the avatar rounded.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function DefaultAvatar() {
return (
<div className="flex flex-wrap gap-2">
<Avatar
alt="avatar of Jese"
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar img="/images/people/profile-picture-5.jpg" />
</div>
)
}
Avatar with border
Use the bordered prop to add a border style to the avatar.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function BorderedAvatar() {
return (
<div className="flex flex-wrap gap-2">
<Avatar
bordered
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar
bordered
img="/images/people/profile-picture-5.jpg"
/>
</div>
)
}
Avatar placeholder
If the user doesn't have an image you can use the placeholder prop to show a placeholder image and you can still pass the rounded prop to make the avatar rounded and other options.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function Placeholder() {
return (
<div className="flex flex-wrap gap-2">
<Avatar />
<Avatar rounded />
</div>
)
}
Placeholder initials
Alternatively to the placeholder image you can use the placeholderInitials prop to show the user initials.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function PlaceholderInitials() {
return (
<div className="flex flex-wrap gap-2">
<Avatar placeholderInitials="RR" />
</div>
)
}
Dot indicator
You can use the status prop to show a dot indicator on the avatar and you can use the statusPosition prop to change the position of the dot indicator.
This is useful to show the user status like online, offline, busy, away, and more.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function DotIndicator() {
return (
<div className="flex flex-wrap gap-2">
<Avatar
img="/images/people/profile-picture-5.jpg"
status="online"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
rounded
status="busy"
statusPosition="top-right"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
status="offline"
statusPosition="bottom-left"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
rounded
status="away"
statusPosition="bottom-right"
/>
</div>
)
}
Stacked layout
Stack multiple avatars together by using the <Avatar.Group> component and by passing the stacked prop to the child components of the group.
The <Avatar.Counter> component can be used to show the total number of avatars in the group by passing the total prop and a link to the href prop to view all users.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function Stacked() {
return (
<div className="flex flex-wrap gap-2">
<Avatar.Group>
<Avatar
img="/images/people/profile-picture-1.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-2.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-3.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-4.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
rounded
stacked
/>
</Avatar.Group>
<Avatar.Group>
<Avatar
img="/images/people/profile-picture-1.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-2.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-3.jpg"
rounded
stacked
/>
<Avatar
img="/images/people/profile-picture-4.jpg"
rounded
stacked
/>
<Avatar.GroupCounter
href="#"
total={99}
/>
</Avatar.Group>
</div>
)
}
Avatar with text
Use this example to show an avatar with text (ie. user name, email, etc) by passing the custom markup inside the <Avatar> component. This is useful for admin dashboard interfaces while the user is logged in.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function AvatarText() {
return (
<Avatar
img="/images/people/profile-picture-5.jpg"
rounded
>
<div className="space-y-1 font-medium dark:text-white">
<div>
Jese Leos
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Joined in August 2014
</div>
</div>
</Avatar>
)
}
Avatar dropdown
Use the <Dropdown> component to show a dropdown menu when clicking on the avatar component. This example is often used to show the user settings, account settings, and more.
- Dashboard
- Settings
- Earnings
- Sign out
- React TypeScript
'use client';
import { Avatar, Dropdown } from 'flowbite-react';
export default function UserDropdown() {
return (
<Dropdown
inline
label={<Avatar alt="User settings" img="/images/people/profile-picture-5.jpg" rounded/>}
>
<Dropdown.Header>
<span className="block text-sm">
Bonnie Green
</span>
<span className="block truncate text-sm font-medium">
name@flowbite.com
</span>
</Dropdown.Header>
<Dropdown.Item>
Dashboard
</Dropdown.Item>
<Dropdown.Item>
Settings
</Dropdown.Item>
<Dropdown.Item>
Earnings
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>
Sign out
</Dropdown.Item>
</Dropdown>
)
}
Colors
If you want to change the default color of the avatar component you can pass the color prop. Colors that you can choose from are gray, light, purple, success, pink, and more.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function ColoredAvatar() {
return (
<>
<div className="flex flex-wrap gap-2">
<Avatar
bordered
color="gray"
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar
bordered
color="light"
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar
bordered
color="purple"
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar
bordered
color="success"
img="/images/people/profile-picture-5.jpg"
rounded
/>
<Avatar
bordered
color="pink"
img="/images/people/profile-picture-5.jpg"
rounded
/>
</div>
<div className="flex flex-wrap gap-2">
<Avatar
bordered
color="gray"
img="/images/people/profile-picture-5.jpg"
/>
<Avatar
bordered
color="light"
img="/images/people/profile-picture-5.jpg"
/>
<Avatar
bordered
color="purple"
img="/images/people/profile-picture-5.jpg"
/>
<Avatar
bordered
color="success"
img="/images/people/profile-picture-5.jpg"
/>
<Avatar
bordered
color="pink"
img="/images/people/profile-picture-5.jpg"
/>
</div>
</>
)
}
Sizes
Change the default size of the avatar component by passing the size prop. Sizes that you can choose from are xs, sm, md, lg, and xl.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function Sizing() {
return (
<div className="flex flex-wrap items-center gap-2">
<Avatar
img="/images/people/profile-picture-5.jpg"
size="xs"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
size="sm"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
size="md"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
size="lg"
/>
<Avatar
img="/images/people/profile-picture-5.jpg"
size="xl"
/>
</div>
)
}
Override image element
You can override the default image element by passing the img prop to the <Avatar> component. This is useful if you want to use a different image element like <Image> from Next.js.
- React TypeScript
'use client';
import { Avatar } from 'flowbite-react';
export default function OverrideImageElement() {
return (
<div className="flex flex-wrap gap-2">
<Avatar img={(props)=>jsx_runtime_.jsx((image_default()), Object.assign({alt: "",height: "48",referrerPolicy: "no-referrer",src: "/images/people/profile-picture-5.jpg",width: "48"}, props))} />
<Avatar img={(props)=>(0,jsx_runtime_.jsxs)(_components.picture, {children: [jsx_runtime_.jsx(_components.source, {media: "(min-width: 900px)",srcSet: "/images/people/profile-picture-3.jpg"}),jsx_runtime_.jsx(_components.source, {media: "(min-width: 480px)",srcSet: "/images/people/profile-picture-4.jpg"}),jsx_runtime_.jsx((image_default()), Object.assign({alt: "",height: "48",src: "/images/people/profile-picture-5.jpg",width: "48"}, props))]})} />
</div>
)
}
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"root": {
"base": "flex justify-center items-center space-x-4 rounded",
"bordered": "p-1 ring-2",
"rounded": "rounded-full",
"color": {
"dark": "ring-gray-800 dark:ring-gray-800",
"failure": "ring-red-500 dark:ring-red-700",
"gray": "ring-gray-500 dark:ring-gray-400",
"info": "ring-cyan-400 dark:ring-cyan-800",
"light": "ring-gray-300 dark:ring-gray-500",
"purple": "ring-purple-500 dark:ring-purple-600",
"success": "ring-green-500 dark:ring-green-500",
"warning": "ring-yellow-300 dark:ring-yellow-500",
"pink": "ring-pink-500 dark:ring-pink-500"
},
"img": {
"base": "rounded",
"off": "relative overflow-hidden bg-gray-100 dark:bg-gray-600",
"on": "",
"placeholder": "absolute w-auto h-auto text-gray-400 -bottom-1"
},
"size": {
"xs": "w-6 h-6",
"sm": "w-8 h-8",
"md": "w-10 h-10",
"lg": "w-20 h-20",
"xl": "w-36 h-36"
},
"stacked": "ring-2 ring-gray-300 dark:ring-gray-500",
"statusPosition": {
"bottom-left": "-bottom-1 -left-1",
"bottom-center": "-bottom-1 center",
"bottom-right": "-bottom-1 -right-1",
"top-left": "-top-1 -left-1",
"top-center": "-top-1 center",
"top-right": "-top-1 -right-1",
"center-right": "center -right-1",
"center": "center center",
"center-left": "center -left-1"
},
"status": {
"away": "bg-yellow-400",
"base": "absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",
"busy": "bg-red-400",
"offline": "bg-gray-400",
"online": "bg-green-400"
},
"initials": {
"text": "font-medium text-gray-600 dark:text-gray-300",
"base": "inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600"
}
},
"group": {
"base": "flex -space-x-4"
},
"groupCounter": {
"base": "relative flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full ring-2 ring-gray-300 hover:bg-gray-600 dark:ring-gray-500"
}
}