Foundations
Agent Avatar
Avatars for agents and people — initials or image, presence and activity state, stacked groups.
2 variantsMIT
Preview
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/agent-avatar.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Avatar, AvatarGroup } from "@/components/ui/agent-avatar";
<Avatar name="i18n-agent" kind="agent" status={run.active ? "working" : "online"} />
{/* Match --avatar-gap to the surface the group sits on. */}
<div className="[--avatar-gap:var(--surface-inset)]">
<AvatarGroup people={participants} max={4} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Used for initials, tint and the accessible name. |
| src | string | — | Image URL; without it, initials on a tint derived from the name. |
| size | "xs" | "sm" | "md" | "lg" | "md" | 20, 28, 36 or 48px. |
| kind | "agent" | "person" | "person" | Agents are rounded squares, people circles. |
| status | "online" | "away" | "busy" | "working" | — | Badge in the corner; working spins. Always included in the accessible name. |
| AvatarGroup.people / max | AvatarProps[] / number | — | Overlapping avatars with names in tooltips; the rest collapse into +N. |
/* CSS variable: --avatar-gap — the colour of the gap around badges and
overlapping avatars. Defaults to var(--background). */