Avatar

Component 3

About

Avatars with image fallbacks, initials, presence dotsand stacked avatar groups. Use them in headers, comments, team lists and user menus.

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

"use client";

import * as React from "react";
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupItem, AvatarImage } from "@/components/ui/avatar";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

const AVATAR_1 = "https://cdn.21st.dev/assets/mirror/88/88eff84004a86794f7aa26759831cc1655b43e729e9a074e9093415d2266d1f7.webp";
const AVATAR_2 = "https://cdn.21st.dev/assets/mirror/53/5399f194e5ce6a4ce7e52b152fe0fb97fb8c4c8055acf098b2885c82ffbd15ab.webp";
const AVATAR_3 = "https://cdn.21st.dev/assets/mirror/a2/a2572edc9d6f1492f6be40f0005dae975e25f36ded2341b5758431d17e87b916.webp";
function PreviewPanel({
  title,
  subtitle,
  children,
  className,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn(wensityCardSurfaceClass, "w-full max-w-lg p-5", className)}>
      <div className="mb-4 border-b border-[var(--border)] pb-3">
        <p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
          {title}
        </p>
        {subtitle ? (
          <p className="mt-1 text-[12px] text-[var(--muted-foreground)]">{subtitle}</p>
        ) : null}
      </div>
      {children}
    </div>
  );
}

export function AvatarPreview() {
  return (
    <PreviewPanel
      title="Team avatars"
      subtitle="Hover for name tooltips without moving the avatar stack."
    >
      <div className="flex flex-wrap items-center justify-center gap-5">
        <Avatar size="lg" tooltip="Parth Sharma">
          <AvatarImage src={AVATAR_1} alt="Parth Sharma" />
          <AvatarFallback>Parth Sharma</AvatarFallback>
        </Avatar>
        <Avatar size="lg" status="online" tooltip="Maya Chen">
          <AvatarImage src={AVATAR_2} alt="Maya Chen" />
          <AvatarFallback>Maya Chen</AvatarFallback>
        </Avatar>
        <AvatarGroup max={3} size="md">
          <AvatarGroupItem name="Parth Sharma">
            <Avatar>
              <AvatarImage src={AVATAR_1} alt="Parth Sharma" />
              <AvatarFallback>Parth Sharma</AvatarFallback>
            </Avatar>
          </AvatarGroupItem>
          <AvatarGroupItem name="Maya Chen">
            <Avatar>
              <AvatarImage src={AVATAR_2} alt="Maya Chen" />
              <AvatarFallback>Maya Chen</AvatarFallback>
            </Avatar>
          </AvatarGroupItem>
          <AvatarGroupItem name="Alex Rivera">
            <Avatar>
              <AvatarImage src={AVATAR_3} alt="Alex Rivera" />
              <AvatarFallback>Alex Rivera</AvatarFallback>
            </Avatar>
          </AvatarGroupItem>
          <AvatarGroupItem name="Jordan Lee">
            <Avatar>
              <AvatarFallback>Jordan Lee</AvatarFallback>
            </Avatar>
          </AvatarGroupItem>
        </AvatarGroup>
      </div>
    </PreviewPanel>
  );
}

export default function Demo() {
  return <AvatarPreview />;
}