UI Skillbook
2

Avatar

A round image for a user or account, showing initials or an icon instead when no picture is available.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Avatar stands in for a single user, team or account next to their name, in headers, comments and list rows. It swaps in initials or an icon while the image loads or when it fails.

Install

bashnpx shadcn@4.18.0 add @siteplane/avatar

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

When to pick it

  • vs Avatar Group: Pick Avatar Group when several people share one spot and you want them overlapped with a +N count.
  • vs Badge: Pick Badge for a text label about status or category; Avatar is only for identity.

Rules

  • Compose Avatar with an AvatarImage and an AvatarFallback, so initials or an icon show while the image loads or if it fails.
  • Write a meaningful alt for the image. When the avatar shows only initials or an icon, add role="img" and an aria-label to Avatar itself.
  • There is no size or shape prop, so resize or reshape with classes such as size-10 or a radius class.
  • Use status for a presence dot and let it announce Online, Away, Busy or Offline; override the wording with statusLabel when translating.
  • Skip the accessible name when the person's name sits beside the avatar, or screen readers read it twice.

Reference

  • Avatar 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

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Better Colorsby jakubkrehel

OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.

VisualExternalGitHub stars: 9.2K

Better Interfaceby jakubkrehel

Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.

VisualExternalGitHub stars: 9.2K

Better Typographyby jakubkrehel

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

TypographyExternalGitHub stars: 9.2K

Color Contrast for Taste, Not Just Complianceby UI Skillbook

Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.

Visual

Back to Siteplane UI