Design
llms.txt digitalcrew.tech

Data display

Avatar

A round image with an initials fallback (Radix Avatar), 32px by default.

MaxData displayDigitalCrew.Avatar
Avatar · liveOpen

Guidelines#

Use it for people: teammates, attendees, stacked participant lists (overlap by 8px with a 2px background ring). Prospects use ProspectAvatar; Digital Workers use AgentFace.

What you provide: AvatarImage (src, alt with the person's name) and AvatarFallback with one or two initials; size through className.

Facts#

GroupData display
ProductMax
Globalwindow.DigitalCrew.Avatar
Sourcemax-agent: src/components/ui/avatar.tsx
Import in the appimport { Avatar } from "@/components/ui/avatar";

API#

TypeScript declarations emitted from src/components/ui/avatar.tsx (the module also exports its other parts).

declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): any;
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): any;
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): any;
export { Avatar, AvatarImage, AvatarFallback };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var BLOB = { "max-carter": "/design/assets/Agents/max-carter.webp", "nora-hale": "/design/assets/Agents/nora-hale.webp" };
function App() {
  return h("div", { className: "flex items-center gap-4" },
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarImage, { src: BLOB["max-carter"], alt: "Max Carter", className: "object-cover" }), h(DC.AvatarFallback, null, "MC")),
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarImage, { src: BLOB["nora-hale"], alt: "Nora Hale", className: "object-cover" }), h(DC.AvatarFallback, null, "NH")),
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarFallback, null, "CD")),
    h("div", { className: "flex -space-x-2" }, ["AM", "JL", "TK", "+4"].map(function (t) { return h(DC.Avatar, { key: t, className: "size-8 ring-2 ring-background" }, h(DC.AvatarFallback, { className: "text-xs" }, t)); })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
AgentFaceAnimateDigitsCampaignStatusBadgeChannelBadgeEmailVerificationBadgeHeroMetricKpiCardMaxIconSetMetricTileProspectAvatarSnippetTimeLensWorldGlobe