Avatars with image fallbacks, initials, presence dotsand stacked avatar groups. Use them in headers, comments, team lists and user menus.
"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 />;
}