# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## avatar Image with initials fallback, stable tint per name, AvatarGroup. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add avatar` Also adds: utils, theme npm: @radix-ui/react-avatar@^1.3.1 class-variance-authority@^0.7.1 ```tsx import { Avatar, AvatarGroup, avatarVariants } from "@/components/ui/avatar"; ``` ### Example ```tsx import * as React from "react"; import { Avatar, AvatarGroup } from "@/components/ui/avatar"; const statuses = ["backlog", "todo", "progress", "review", "done"] as const; function Row({ label, children }: { label: string; children: React.ReactNode }) { return (

{label} {children}

); } export default function Demo() { const people = ["Ada Lovelace", "Grace Hopper", "Alan Turing", "Katherine Johnson", "Linus Torvalds", "Margaret Hamilton"]; return (

{people.map((p) => ( ))}

); } ``` ### Source: ui/avatar.tsx ```tsx "use client"; import * as React from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const avatarVariants = cva("relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted select-none", { variants: { size: { xs: "size-4 text-[8px]", sm: "size-5 text-[9px]", md: "size-6 text-2xs", lg: "size-8 text-xs", xl: "size-10 text-sm", }, }, defaultVariants: { size: "md" }, }); // Stable tint per name, so the same person always gets the same color. const tints = ["todo", "progress", "review", "done", "backlog"] as const; const tintClasses: Record<(typeof tints)[number], string> = { todo: "bg-status-todo-subtle text-status-todo-fg", progress: "bg-status-progress-subtle text-status-progress-fg", review: "bg-status-review-subtle text-status-review-fg", done: "bg-status-done-subtle text-status-done-fg", backlog: "bg-status-backlog-subtle text-status-backlog-fg", }; function tintFor(name: string) { let h = 0; for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) >>> 0; return tintClasses[tints[h % tints.length]]; } function initials(name: string) { const parts = name.trim().split(/\s+/); return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase(); } const presence = { online: { label: "Online", className: "bg-success" }, away: { label: "Away", className: "bg-warning" }, busy: { label: "Busy", className: "bg-danger" }, offline: { label: "Offline", className: "bg-fg-subtle" }, } as const; type AvatarProps = React.ComponentProps & VariantProps & { name: string; src?: string; /** Presence dot in the bottom-right corner. */ status?: keyof typeof presence; }; function Avatar({ name, src, size, status, className, ...props }: AvatarProps) { const avatar = ( {src && } {initials(name)} ); if (!status) return avatar; return ( {avatar} ); } /** Overlapping stack: {people.map(…)} */ function AvatarGroup({ children, max, className, ...props }: React.ComponentProps<"div"> & { max?: number }) { const items = React.Children.toArray(children); const shown = max ? items.slice(0, max) : items; const rest = items.length - shown.length; return (

*]:ring-2 [&>*]:ring-surface", className)} {...props}> {shown} {rest > 0 && ( +{rest} )}

); } export { Avatar, AvatarGroup, avatarVariants }; ```

Avatar

Installation

Usage

Avatar

Installation

Usage