# Shadcn UI Avatar

> Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.

- Skill: `serverpod/shadcn-ui-avatar` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serverpod/shadcn-ui-avatar`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serverpod/shadcn-ui-avatar/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: serverpod (https://skillmd.com/u/serverpod)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serverpod/shadcn-ui-avatar

---


# Shadcn UI — Avatar

## Instructions

`ShadAvatar` is an image with a placeholder for representing the user. Uses the `universal_image` package for multiple image formats.

### Basic usage

```dart
ShadAvatar(
  'https://example.com/avatar.png',
  placeholder: Text('CN'),
)
```

Pass the image URL as the first argument; `placeholder` is shown while loading or if the image fails (e.g. initials).