"use client"; import * as React from "react"; import { Avatar as AvatarPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; const sizes = { sm: "size-8 text-[11px]", md: "size-11 text-sm", lg: "size-14 text-base", xl: "size-20 text-xl" }; const statusColors = { online: "bg-success", away: "bg-warning", busy: "bg-danger", offline: "bg-subtle" }; export type AvatarProps = { src?: string; alt?: string; /** Shown while the image loads or if it fails. Defaults to initials of `alt`. */ fallback?: string; size?: keyof typeof sizes; status?: keyof typeof statusColors; /** Accent ring, e.g. for "has a new story". */ ring?: boolean; /** Fallback background colour. */ color?: string; className?: string; }; function initials(name = "") { return name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((p) => p[0]!.toUpperCase()) .join(""); } export function Avatar({ src, alt = "", fallback, size = "md", status, ring, color, className }: AvatarProps) { return ( {src ? : null} {fallback ?? initials(alt)} {status ? ( ) : null} ); } export type AvatarStackProps = { avatars: AvatarProps[]; /** Show at most this many, then "+N". */ max?: number; size?: keyof typeof sizes; className?: string; }; /** Overlapping avatars that fan out on hover. */ export function AvatarStack({ avatars, max = 4, size = "md", className }: AvatarStackProps) { const shown = avatars.slice(0, max); const rest = avatars.length - shown.length; return (

{shown.map((a, i) => ( ))} {rest > 0 ? ( +{rest} ) : null}

); }

Avatar

Installation

Exports