An avatar from the Create UI design system with photos or initials, seven sizes, circle or rounded shapes, eight status badges, progress and gradient rings, icon, count and flag badges, and overlapping groups.
import { Germany } from "@create-ui/assets/flags"
import {
RiCalendarFill,
RiCheckLine,
RiLockFill,
RiPushpinFill,
} from "@create-ui/assets/icons"
import {
Avatar,
AvatarBadge,
AvatarBadgeFlag,
AvatarBadgeIcon,
AvatarBadgePolygon,
AvatarBadgeStatus,
AvatarBadgeText,
AvatarGroup,
AvatarImage,
AvatarRing,
AvatarText,
} from "@/components/ui/avatar"
const team = [
{
src: "https://cdn.21st.dev/assets/mirror/d5/d581d1ae9e39857f90184b59b6f0a3468affd309bfc0aeea08bb14e1e11a6a6e.webp",
name: "Ayla Karagöz",
},
{
src: "https://cdn.21st.dev/assets/mirror/ef/ef9b9baf2f00fdf185cffc5da66f486429ff4280602d69b7340df891641734e5.webp",
name: "Luca Moretti",
},
{ src: "https://cdn.21st.dev/assets/mirror/28/2816945d50bb39f78476be7a0d32afc1d9bdd4e98426f17bb0da213a1f08ea8d.webp", name: "Yuki Tanaka" },
{ src: "https://cdn.21st.dev/assets/mirror/c4/c47ab1e54d84c1f090891e82e1b967b3c810fbe2b682e3c591438ee7e19c56a4.webp", name: "Sofia Reis" },
{
src: "https://cdn.21st.dev/assets/mirror/5b/5bedb341d2598c1e01ccafea3bf20c53910e8a8fd11c11e0d8dc02d96315d9fd.webp",
name: "Marcus Okafor",
},
]
export default function AvatarDemo() {
return (
<div className="flex flex-col items-center gap-10">
<div className="grid grid-cols-4 place-items-center gap-6">
<Avatar size="2xl" variant="weak-orange">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/b3/b3d753b569ddc3c2c4d8b892d30ee6668c41bfce6ae61805b1e8fa20a9baf67e.webp"
alt="Diego Fernández"
/>
<AvatarRing variant="progress" color="info" value={72} />
<AvatarBadge position="bottom">
<AvatarBadgeStatus variant="typing" />
</AvatarBadge>
</Avatar>
<Avatar size="2xl" variant="alpha-sky">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/52/52d52acb8a706782e79e0a4437f62060da4d8e17f239600cfe49170bd67367b9.webp"
alt="Kwame Mensah"
/>
<AvatarRing variant="progress" color="info" value={72} />
<AvatarBadge position="top">
<AvatarBadgePolygon color="sky">
<RiCheckLine />
</AvatarBadgePolygon>
</AvatarBadge>
<AvatarBadge position="bottom">
<AvatarBadgeStatus variant="online" />
</AvatarBadge>
</Avatar>
<Avatar size="2xl" variant="weak-orange">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/6c/6c7c914adceef0e1e3a9ff3df1124a0ea6fe3156941df059d8ca6daeff3d637a.webp"
alt="Jae Park"
/>
<AvatarRing color="error" />
<AvatarBadge position="top">
<AvatarBadgeText color="rose">9</AvatarBadgeText>
</AvatarBadge>
</Avatar>
<Avatar size="2xl" shape="rounded" variant="weak-orange">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/92/92d4f1fe01f56f605320365b03bffcff78edb678024b93c43d9fd65ad07c104a.webp"
alt="Ronan Kelly"
/>
<AvatarBadge position="bottom">
<AvatarBadgeStatus variant="do-not-disturb" shape="rounded" />
</AvatarBadge>
</Avatar>
<Avatar size="2xl" shape="rounded" variant="weak-green">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/8e/8e1cafdf6954a6fbf436436f8f4e400ebb76b4c0cd583f80b6df9cf2db745f2a.webp"
alt="Haruki Mori"
/>
<AvatarBadge position="top">
<AvatarBadgeIcon color="blue">
<RiPushpinFill />
</AvatarBadgeIcon>
</AvatarBadge>
</Avatar>
<Avatar size="2xl" variant="weak-orange">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/c2/c21ad758018c6d0f0ca4f1fda5072c3e0a9f4b16c67707df4977f05b0338ea8e.webp"
alt="Lucas Meyer"
/>
<AvatarBadge position="top">
<AvatarBadgeIcon color="violet">
<RiLockFill />
</AvatarBadgeIcon>
</AvatarBadge>
</Avatar>
<Avatar size="2xl" variant="base-orange">
<AvatarText>CK</AvatarText>
<AvatarBadge position="top">
<AvatarBadgePolygon color="yellow">
<RiCheckLine />
</AvatarBadgePolygon>
</AvatarBadge>
</Avatar>
<Avatar size="2xl" variant="weak-sky">
<AvatarImage
src="https://cdn.21st.dev/assets/mirror/40/407830e44308f9c573b790962c9e22ade8fb28e0ae9440ec2a37984c85a5a273.webp"
alt="Sena Yılmaz"
/>
<AvatarRing color="linear-2" />
<AvatarBadge position="top">
<AvatarBadgeFlag>
<Germany />
</AvatarBadgeFlag>
</AvatarBadge>
<AvatarBadge position="bottom">
<AvatarBadgeIcon color="violet">
<RiCalendarFill />
</AvatarBadgeIcon>
</AvatarBadge>
</Avatar>
</div>
<AvatarGroup size="lg">
{team.map((person) => (
<Avatar key={person.name}>
<AvatarImage src={person.src} alt={person.name} />
</Avatar>
))}
</AvatarGroup>
</div>
)
}