Componentdata0.68 KB gzipZero dependencies

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

Open in StackBlitz

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

<Avatar name="Ada Bull" />

Usage guidance

Use Avatar when a ticket stub surface needs Initials or photo badge with dashed ring. Keep props minimal and prefer composition with sibling stubs.

Avoid Avatar for long form flows or dense data grids where a dedicated layout block fits better.

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