KitlenoKitlenov2.0.0

Feedback / Avatar

Avatar

Avatar components represent a user or entity with initials, an icon fallback, an online status dot, or a grouped stack.

Avatar with Initials

A simple avatar showing a person's initials.

SC
AvatarInitials.jsx
export default function AvatarInitials() {
  return (
    <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#1d1d1f] dark:bg-white text-[13px] font-semibold text-white dark:text-[#1d1d1f]">
      SC
    </div>
  )
}

Avatar with Icon Fallback

A neutral avatar that falls back to a generic person icon when no name or image is available.

AvatarIcon.jsx
import { User } from 'lucide-react'

export default function AvatarIcon() {
  return (
    <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#f0f0f0] dark:bg-[#2a2a2a] text-[#6e6e73] dark:text-[#a1a1a6]">
      <User size={20} strokeWidth={1.8} />
    </div>
  )
}

Avatar with Status

An avatar with initials and an online status indicator to show presence.

JO
AvatarStatus.jsx
export default function AvatarStatus() {
  return (
    <div className="relative h-11 w-11">
      <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#e3f2fd] text-[13px] font-semibold text-[#1976d2]">
        JO
      </div>
      <span className="absolute bottom-0 right-0 h-[11px] w-[11px] rounded-full bg-green-500 border-2 border-white dark:border-[#161616]" />
    </div>
  )
}

Avatar Group

A stacked group of avatars with an overflow count, useful for showing multiple participants at a glance.

PN
MK
+4
AvatarGroup.jsx
export default function AvatarGroup() {
  return (
    <div className="flex items-center">
      <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#fce4ec] text-[13px] font-semibold text-[#c2185b] ring-2 ring-white dark:ring-[#161616]">
        PN
      </div>
      <div className="-ml-3 flex h-11 w-11 items-center justify-center rounded-full bg-[#e8f5e9] text-[13px] font-semibold text-[#388e3c] ring-2 ring-white dark:ring-[#161616]">
        MK
      </div>
      <div className="-ml-3 flex h-11 w-11 items-center justify-center rounded-full bg-[#fff3e0] text-[13px] font-semibold text-[#f57c00] ring-2 ring-white dark:ring-[#161616]">
        +4
      </div>
    </div>
  )
}