Skip to main content

​
Overview

Avatar is a React Native component designed for displaying user avatars. It can show an image avatar from a given source. If the image fails to load, a fallback text can be displayed.

​
Preview

  • Preview
  • Code

Light Mode

Dark Mode

​
Installation

  • CLI
  • Manual
npx nativecn-ui add Avatar

​
Usage

​
Basic usage

<Avatar>
  <AvatarImage
    source={{
      uri: 'https://pbs.twimg.com/profile_images/1745949238519803904/ZHwM5B07_400x400.jpg',
    }}
  />
  <AvatarFallback>CG</AvatarFallback>
</Avatar>

​
Custom fallback style

<Avatar>
  <AvatarImage
    source={{
      uri: 'https://pbs.twimg.com/profile_images/1603610343905058816/PsPEWMOJ_400x400.jpgx',
    }}
  />
  <AvatarFallback textClassname="text-amber-400">SS</AvatarFallback>
</Avatar>
⌘I