# Avatar group grid

> AvatarGroupGrid (texuli/avatar): two to four faces collaged in one circle with a +N cell, by member count, size and in a group conversation list.

Language: en
Canonical: https://texuli.com/examples/ui-avatar-grid/
Markdown: https://texuli.com/examples/ui-avatar-grid.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

AvatarGroupGrid (texuli/avatar): two to four faces collaged in one circle with a +N cell, by member count, size and in a group conversation list.

[Avatar group grid](https://texuli.com/examples/ui-avatar-grid/)

`ui-avatar-grid` · `texuli/AvatarGroupGrid`

 texuli avatar

 Props
- `items`
- `label`
- `size`

Live example loads in an isolated same-origin preview frame.

Source (avatar/AvatarGridDemo.svelte)

```
<script lang="ts">
import { AVATAR_SIZES, AvatarGroupGrid } from 'texuli/avatar';

/**
 * `AvatarGroupGrid`: a 2x2 collage inside one avatar-sized circle,
 * as group conversations show their members. Fictional Harbor names only.
 */
const crew = [
  { name: 'Ada Example' },
  { name: 'Bea Harbor' },
  { name: 'Cal Orbit' },
  { name: 'Dee Quill' },
  { name: 'Eli North' },
  { name: 'Fay Reed' },
];
const counts = [2, 3, 4, 6] as const;
const conversations = [
  { title: 'Launch crew', members: crew.slice(0, 3) },
  { title: 'Harbor design review', members: crew },
];
</script>

<section data-example="ui-avatar-grid" aria-labelledby="avatar-grid-title">
  <h2 id="avatar-grid-title">Avatar group grid</h2>

  <h3>By member count</h3>
  <p class="row">
    {#each counts as count (count)}
      <span class="cell">
        <AvatarGroupGrid size="lg" items={crew.slice(0, count)} />
        <span class="caption">{count} members</span>
      </span>
    {/each}
  </p>

  <h3>Sizes</h3>
  <p class="row">
    {#each AVATAR_SIZES as size (size)}
      <span class="cell">
        <AvatarGroupGrid {size} items={crew.slice(0, 4)} />
        <span class="caption">{size}</span>
      </span>
    {/each}
  </p>

  <h3>Group conversations</h3>
  <ul class="list">
    {#each conversations as conversation (conversation.title)}
      <li>
        <AvatarGroupGrid items={conversation.members} label={conversation.title} />
        <span>{conversation.title}</span>
      </li>
    {/each}
  </ul>
</section>

<style>
  section {
    color: var(--tx-foreground, CanvasText);
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
  }
  .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .caption {
    font-size: var(--tx-font-size-xs, 0.75rem);
    color: var(--tx-muted-foreground, GrayText);
  }
  .list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)