Skip to Content

Built by moveinready.casa  and the community

Shadcn Docs

Radix Docs

Avatar

An image element with a fallback for representing a user.

Usage

import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"; <Avatar size="lg" isBordered> <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar>;

Props

PropTypeDefaultDescription
childrenReact.ReactNodeRequired. The image and fallback nodes.
sizesm | md | lgmdControls the width/height preset.
borderRadiusnone | sm | md | lg | xl | fullfullBorder-radius shortcut.
isBorderedbooleanfalseAdds a 2-pixel ring using theme border color.
isDisabledbooleanfalseLowers opacity & sets accessibilityState.disabled.
variantshadcn | warning | error | successshadcnPre-made background colour variants.
baseClassNamestringExtra Tailwind classes merged into the base wrapper.

AvatarImage

All props of React-Native Image plus:

PropTypeDescription
baseClassNamestringTailwind classes merged into the image element.

AvatarFallback

PropTypeDescription
childrenReact.ReactNodeInitials or icon displayed when image errors.
baseClassNamestringTailwind classes for the fallback wrapper.

Component Structure

<Avatar> <AvatarImage /> // optional, hidden until loaded <AvatarFallback /> // initials / icon shown on error </Avatar>
  • Avatar – the root wrapper (View) controlling size, radius, variant & accessibility state.
  • AvatarImage – React-Native Image that fades in on load. Automatically toggles status.
  • AvatarFallbackView overlay that appears only if the image errors. Put initials or an icon inside.

Accessibility

  • The root element exposes accessibilityRole="image" by default.
  • When isDisabled is set it adds accessibilityState={{disabled:true}}.
  • AvatarFallback content is read by screen-readers as normal text ensuring a meaningful alternative when the image cannot load.
  • Stick to short initials (2–3 letters) or concise icons for best screen-reader experience.

shadcn-native

Built by moveinready.casa and the community