Avatar

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar to your project and fits it to your theme.

Code

How Avatar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}