Componentdata

Avatar

Initials or photo badge with dashed ring.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add avatar

Or install the full npm package:

npm install bigbullui

Usage

import { Avatar } from "@/components/ui/avatar";

<Avatar name="Ada Bull" />

Source code

avatar.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

type Size = "sm" | "md" | "lg";

export type AvatarProps = {
  name: string;
  src?: string;
  size?: Size;
  className?: string;
};

const sizes: Record<Size, string> = {
  sm: "size-8 text-xs",
  md: "size-10 text-sm",
  lg: "size-12 text-base",
};

function initialsOf(name: string): string {
  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => part[0] ?? "")
    .join("")
    .toUpperCase();
}

const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
  ({ name, src, size = "md", className }, ref) => {
    const [failed, setFailed] = React.useState(false);

    return (
      <div
        ref={ref}
        role="img"
        aria-label={name}
        className={cn(
          "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md border-2 border-dashed border-foreground/50 bg-secondary font-mono font-bold text-secondary-foreground",
          sizes[size],
          className
        )}
      >
        {src && !failed ? (
          <img src={src} alt={name} className="size-full object-cover" onError={() => setFailed(true)} />
        ) : (
          <span aria-hidden>{initialsOf(name)}</span>
        )}
      </div>
    );
  }
);
Avatar.displayName = "Avatar";

export { Avatar };

Props

Prop	Type	Description
name	string	Full name — used for initials and aria-label (required).
src	string	Photo URL, falls back to initials on error.
size	"sm" \| "md" \| "lg"	Avatar size (default md).