Components

Avatar

A circular image container with an accessible fallback for representing users and entities.

SCJDWM

Image and fallback states are rendered directly in the docs preview.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add avatar to your project.

watermelon add avatar

If you are wiring the component manually, install the package dependencies shown below.

npm install @rn-primitives/avatar

Import Avatar from your local UI registry output.

Import

import { Avatar } from "@/components/ui/avatar";

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Text } from "@/components/ui/text";

The Avatar primitive uses @rn-primitives/avatar for lazy loading with an accessible AvatarFallback shown before the image resolves.

Provide a src to load a remote image for the avatar.

When no image is provided, AvatarFallback always renders.

Override the default 40×40 size with NativeWind classes.

prop	type	default	description
src	string	-	Image source URI passed to AvatarImage.
alt	string	-	Accessible label for the avatar image.
className	string	-	Override classes on the Avatar root container.