UI Skillbook
2

Avatar Group

A facepile: several avatars overlapped in a row with an optional count of the people not shown.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-avatar-group and follow the Siteplane Avatar Group skill it prints for this task.

Paste this into your agent.

Avatar Group shows that a set of people belongs to something, such as project members or reviewers, without listing each name. It handles the overlap, the separating ring and the overflow pill.

Install

bashnpx shadcn@4.18.0 add @siteplane/avatar-group

Import it from @/siteplane/components/avatar-group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Avatar: Pick a single Avatar when only one person is involved.
  • vs Resource List: Pick Resource List when every person needs their name and details visible on screen.

Rules

  • Place Avatar children straight inside AvatarGroup, then end with an AvatarGroupCount for the hidden members.
  • Set size (sm, md, lg, xl) on the group rather than on each avatar so the overlap and the count scale together.
  • Set count to the number of avatars left out, and pair it with screen-reader-only text naming what is counted, for example "more members".
  • Decide in your own code how many avatars to render; the group does not measure or trim its children.
  • The ring colour follows the kit surface, so on a custom surface check that it matches the background.

Reference

  • Avatar Group docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-avatar-group

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Banner Designby nextlevelbuilder

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

VisualExternalGitHub stars: 142.5K

Beautiful Shadowsby MengTo

Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.

VisualExternalGitHub stars: 7.1K

Bencium Innovative Ux Designerby bencium

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

VisualExternalGitHub stars: 470

Back to Siteplane UI