# Shadcn Custom Sizes

> Avatars with custom sizes

- Type: example, free and open source (MIT)
- Component: [Avatar](https://reui.io/components/avatar.md)
- Page: https://reui.io/components/avatar/c-avatar-5
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/avatar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/avatar.md
- MCP: `get_example("c-avatar-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-avatar-5.json
- Uses: Avatar

## Best for

Free sizing through className at 16, 32, 48 and 64 pixels, beyond the 3 presets of the size prop

## Agent notes

- Sizes set through `className` leave `data-size` at default, so the fallback text and any `AvatarBadge` keep their default size

## When not to use

- Sizes that should scale the badge and fallback text along with the photo: use [Sizes](https://reui.io/components/avatar/c-avatar-3.md) (`get_example("c-avatar-3")`)

## Install

```bash
npx shadcn@latest add @reui/c-avatar-5
```

## About Shadcn Avatar

### When to use

- Profile photos with initials or a user icon that stand in when the picture is missing or fails
- Presence dots, verified marks and number badges pinned to the corners of a person's photo
- Overlapping team stacks, social proof rows and user chips inside buttons or account triggers

### When not to use

- An account panel opened from a trigger, with the name, email and grouped actions: use [Dropdown Menu](https://reui.io/components/dropdown-menu.md) (`get_component("dropdown-menu")`)
- A full account settings page where a person edits photo, name and details: use the [Profile blocks](https://reui.io/blocks/application/profile.md)
- A workspace members directory with roles, invites and access status: use the [Users blocks](https://reui.io/blocks/solutions/users.md)

### Agent notes

- Initials inside `AvatarFallback` are typed by hand in every example; derive them from each person's name rather than copying the sample letters
- A square `Avatar` needs the same radius on `AvatarImage`, `AvatarFallback` and its after pseudo element border, since all 3 default to round

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.