Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The UserBold component displays user profile images, initials, or icons with support for different sizes and status indicators.

​
Basic Usage

import { Avatar } from '@peppermint-design/devreadykit-custom';

export default function App() {
  return (
    <div className="flex items-center gap-4">
        <Avatar
            src="https://i.pravatar.cc/100?img=48"
            alt="John Doe"
            name="John Doe"
            size="xs"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=32"
            alt="Jane Smith"
            name="Jane Smith"
            size="sm"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=12"
            alt="Jane Smith"
            name="Jane Smith"
            size="md"
        />
        <Avatar
            src="https://i.pravatar.cc/100?img=18"
            alt="Jane Smith"
            name="Jane Smith"
            size="lg"
        />
    </div>
  );
}

​
Fallback to Initials

When the image fails to load, it automatically falls back to initials. 
import Avatar from "@peppermint-design/devreadykit-custom";

export default function AvatarImageFallback() {
  return (
    <div className="flex items-center gap-4">
      <Avatar
        src="https://example.com/missing-image.jpg"
        alt="Missing Image"
        name="John Doe"
      />
    </div>
  );
}

​
Initials Avatars

​
With Name

The component automatically generates initials from the name. 
import Avatar from "@peppermint-design/devreadykit-custom";

export default function AvatarInitials() {
    return (
        <div className="flex items-center gap-4">
            <Avatar name="John Doe" size="xs" />
            <Avatar name="Jane Smith" size="sm" />
            <Avatar initials="AB" size="md" />
        </div>
    );
}

​
Icon Avatars

import Avatar from "@peppermint-design/devreadykit-custom";
import { User } from "@/assets/icons/user";

export default function AvatarIconExamples() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="xs" icon={<User />} />
      <Avatar size="sm" icon={<User />} />
      <Avatar size="md" icon={<User />} />
      <Avatar size="lg" icon={<User />} />
    </div>
  );
}

​
Sizes

Avatars support four fixed sizes. The default size token is sm (40px). 
<Avatar name="John Doe" size="xs" />
<Avatar name="John Doe" size="sm" />
<Avatar name="John Doe" size="md" />
<Avatar name="John Doe" size="lg" />

​
Status Badges

​
With Status Badge

import Avatar from "@peppermint-design/devreadykit-custom";

export default function AvatarStatusBadges() {
  return (
    <div className="flex items-center gap-6">
      <Avatar name="John Doe" size="xs" showBadge badgeVariant="dot" />
      <Avatar name="Jane Smith" size="sm" showBadge badgeVariant="icon" />
      <Avatar name="Jane Smith" size="md" showBadge badgeVariant="icon" />
      <Avatar name="Jane Smith" size="lg" showBadge badgeVariant="icon" />
    </div>
  );
}

​
Props

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg""sm"Avatar size token
srcstring—Image source URL
altstring—Alt text for image
namestring—User name for initials
initialsstring—Custom initials
iconReact.ReactNode—Icon to display
showBadgebooleanfalseShow status badge
badgeIconReact.ReactNode—Badge icon
badgeVariant"auto" | "dot" | "icon""auto"Badge style
badgeClassNamestring—Custom badge classes
classNamestring—Additional CSS classes

​
Examples

​
User List

import Avatar from "@peppermint-design/devreadykit-custom";

const users = [
    {
        id: 1,
        name: "John Doe",
        avatar: "https://i.pravatar.cc/100?img=12",
        isOnline: true,
    },
    {
        id: 2,
        name: "Jane Smith",
        avatar: "https://i.pravatar.cc/100?img=18",
        isOnline: false,
    },
    {
        id: 3,
        name: "Alex Johnson",
        avatar: "https://i.pravatar.cc/100?img=28",
        isOnline: true,
    },
];

export default function AvatarUserListExample() {
    return (
        <div className="space-y-3">
            {users.map((user) => (
                <div key={user.id} className="flex items-center gap-3">
                    <Avatar
                        src={user.avatar}
                        name={user.name}
                        size="md"
                        showBadge={user.isOnline}
                    />
                    <span className="text-sm text-neutral-700">{user.name}</span>
                </div>
            ))}
        </div>
    );
}

​
Team Members

import Avatar from "@peppermint-design/devreadykit-custom";

const members = [
{ id: 1, name: "John", avatar: "https://i.pravatar.cc/100?img=15" },
{ id: 2, name: "Jane", avatar: "https://i.pravatar.cc/100?img=47" },
{ id: 3, name: "Alex", avatar: "https://i.pravatar.cc/100?img=20" },
{ id: 4, name: "Maria", avatar: "https://i.pravatar.cc/100?img=33" },
{ id: 5, name: "Chris", avatar: "https://i.pravatar.cc/100?img=7" },
{ id: 6, name: "Taylor", avatar: "https://i.pravatar.cc/100?img=52" },
];

export default function AvatarTeamMembersExample() {
  return (
    <div className="flex items-center">
      {members.slice(0, 5).map((member, index) => (
        <Avatar
          key={member.id}
          src={member.avatar}
          name={member.name}
          size="sm"
          className="border-2 border-white -ml-2 first:ml-0"
          style={{ zIndex: members.length - index }}
        />
      ))}
      {members.length > 5 && (
        <div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-neutral-600">
          +{members.length - 5}
        </div>
      )}
    </div>
  );
}