Shadcn Avatar

Browse 35 production-ready shadcn avatar components for user profiles, team rosters, and presence indicators. Avatar is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create styling.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

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 the Dropdown Menu component
A full account settings page where a person edits photo, name and details: use the Profile blocks
A workspace members directory with roles, invites and access status: use the Users blocks

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

Markdownhttps://reui.io/components/avatar.md

MCPget_component("avatar")

Installnpx shadcn@latest add avatar

Full index for agents:llms.txtReUI MCP setup

Shadcn Avatar: Display User Profiles & Initials

Shadcn Avatar is an image placeholder with fallback initials or icons, displaying when user photos fail to load or are unavailable. It follows Radix UI composition conventions and Base UI-style unstyled flexibility, with full compatibility for Shadcn Create styling.

It shows a round or square image container with automatic fallback to initials, labels, or icons, gracefully handling missing or failed images without breaking the layout.

ReUI lists avatar components inside team directories, comment threads, user tables, and profile cards so you evaluate sizing, grouping, and presence indicators next to realistic content. The sections below explain what the component is, why teams use it, key features, and integration ideas.

What is Shadcn Avatar?

An avatar component displays a user's photo or initials in a fixed-size circle or square. Shadcn Avatar follows Radix UI composition with an AvatarImage (for the photo) and AvatarFallback (for initials or icon), so the UI stays stable if the image fails or loads slowly.

Components here show single avatars in profiles, grouped avatars for teams (stacked or in a grid), presence indicators (green dot for online), and fallback initials extracted from names. They help you choose a size, decide on fallback content, and see how avatars pair with other components.

Why Use Shadcn Avatar?

User photos humanize interfaces and help identify people at a glance. Avatars are essential in team tools, comment sections, and collaborative apps, but image loading failures and missing photos need graceful fallbacks to avoid blank spaces.

Real team rosters, comment threads, and profile cards on this page show how avatars integrate with names, roles, and status indicators.

Shadcn Avatar Features

Image Fallback. Shows initials or an icon if the image fails to load or is not provided, so the UI never breaks.
Size Variants. Supports multiple sizes (xs, sm, md, lg, xl) via Tailwind classes for consistency across lists, cards, and density levels.
Status Indicators. Add a small dot or badge (using Shadcn Badge) to show online status, presence, or role without extra space.
Grouped Avatars. Stack or overlap multiple avatars with a count indicator (+3) when space is limited, common in team or group contexts.
Initials Extraction. Derive fallback initials from a name string in the client, or pass explicit initials for custom formatting.

Pair avatars with text (names, roles) inside a Shadcn Card or list item for user profiles. Use Shadcn Badge to show roles, status, or organization next to the avatar.

Combine avatars with Shadcn Popover to show detailed profiles on hover. Use a group of avatars with a Shadcn Dialog to show full team rosters when space is limited.

In comment threads, pair avatars with Shadcn Textarea for input and Shadcn Button to submit. Use avatars in Shadcn Table columns to identify users in data rows, styled with Shadcn Skeleton as a loading state.

Profile Blocks in ReUI Pro

The free examples above pair with 10 production ready profile blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Profile (10 blocks)User profile pages with avatars, bios, activity feeds, and account management sections.

Browse all Application blocks

Frequently Asked Questions

What should I show as an avatar fallback if the image is missing?

Show the user's initials (first + last letter) extracted from their name. If a name is unavailable, use a generic icon (User icon from Lucide) or a colored background with the first letter.

How do I handle image loading errors gracefully?

The AvatarImage component from Radix UI automatically shows the AvatarFallback when the image fails to load. No extra code needed; it's built in.

Can I add a status indicator or badge to an avatar?

Yes. Use absolute positioning to place a Shadcn Badge or small dot in the bottom-right corner of the avatar. Pair with a class like 'absolute bottom-0 right-0'.

How should I display multiple avatars in a group?

Use CSS transforms (overlap with negative margin or transform: translateX) to stack avatars on top of each other, or show them side-by-side and add a +N indicator when space is limited.

What size should avatars be in different contexts?

Lists and tables: sm (32px); comments and mentions: md (40px); profile pages: lg or xl (64px+). Match size to surrounding text and interaction density.

Can I make avatars clickable to open a profile?

Yes. Wrap the Avatar in a button or link. Use cursor-pointer and add a hover state (opacity, shadow) to signal interactivity.

How are ReUI avatar components different from a standalone component demo?

They show avatars inside team rosters, comment threads, and user lists so you see sizing, grouping, and how presence indicators pair with names and roles.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.