Avatar

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

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

Avatar wraps the avatar primitive of the chosen base. An Avatar contains an AvatarImage and an AvatarFallback; the fallback shows while the image is loading or if it fails to load. Add an AvatarBadge to show a status dot or icon in the bottom-end corner.

To show several people together, place avatars in an AvatarGroup, which overlaps them and rings each one with the background color. End the group with an AvatarGroupCount to indicate how many more people there are.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/avatar

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add avatar

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

Copy the source into components/ui/avatar.tsx:

components/ui/avatar.tsx

"use client"

import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
import type * as React from "react"
import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: AvatarPrimitive.Root.Props & {
  size?: "default" | "sm" | "lg" | "xl"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"

Update the import paths to match your project.

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src={people[0].src} alt={people[0].name} />
  <AvatarFallback>{people[0].initials}</AvatarFallback>
</Avatar>

Always provide an AvatarFallback alongside AvatarImage, usually the person's initials. The fallback can also hold an icon, which scales to 60% of the avatar.

Set size on each Avatar. Inside an AvatarGroup, AvatarGroupCount matches the size of the avatars in the group automatically.

Examples

Fallback

Shows initials when no image is provided.

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export default function AvatarFallbackExample() {
  return (
    <Avatar>
      <AvatarFallback>LC</AvatarFallback>
    </Avatar>
  )
}

Fallback sizes

Initials fallbacks at every size.

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

Placeholder

Uses a person icon as the fallback at every size.

import { UserIcon } from "@phosphor-icons/react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export default function AvatarPlaceholder() {
  return (
    <div className="flex items-center gap-3">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarFallback>
            <UserIcon className="fill-current" />
          </AvatarFallback>
        </Avatar>
      ))}
    </div>
  )
}

Sizes

Image avatars in the sm, default, lg and xl sizes.

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

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

With badge

Adds a check-mark status badge to each size.

import { CheckIcon } from "@phosphor-icons/react"
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",

Group

Overlaps several avatars and ends with a +4 count.

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",

Group with icon count

A large group whose count shows a plus icon instead of a number.

import { PlusIcon } from "@phosphor-icons/react"
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {

API Reference

Anatomy9 parts

</Avatar>

</Avatar>

</AvatarGroup>

Avatar

The circular root that sets the size.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "xl"`	`"default"`	Diameter of the avatar: `sm`, `default`, `lg` or `xl`. Also scales the fallback text and badge.

Also accepts the props of the primitive part it wraps.

AvatarImage

The person's image, cropped to a circle.

Also accepts the props of the primitive part it wraps.

AvatarFallback

Content shown when the image is missing or still loading.

Also accepts the props of the primitive part it wraps.

AvatarBadge

A small status indicator pinned to the bottom-end corner.

Also accepts the props of React.ComponentProps<"span">.

AvatarGroup

A row that overlaps avatars with a ring between them.

Also accepts the props of React.ComponentProps<"div">.

AvatarGroupCount

A trailing circle that shows how many avatars are not displayed.

Also accepts the props of React.ComponentProps<"div">.

Accessibility

Give AvatarImage an alt that names the person.
AvatarBadge and AvatarGroupCount are plain elements; if they carry meaning, label them or describe the status in nearby text.

Notes

Styling hooks: data-slot="avatar", "avatar-image", "avatar-fallback", "avatar-badge", "avatar-group" and "avatar-group-count", plus data-size on the root.
AvatarBadge uses bg-primary by default; override it, for example with bg-green-500. At the sm size, icons inside the badge are hidden.
The fallback uses a vertical gradient of muted-foreground with text-primary-foreground.

iOS

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

export function AvatarExample() {
  return (
    <Avatar>
      <AvatarImage
        alt="Ada Lovelace"
        source={{ uri: "https://i.pravatar.cc/150?img=5" }}
      />
      <AvatarFallback>
        <Text>AL</Text>
      </AvatarFallback>
    </Avatar>
  )
}

import EsuissUI
import SwiftUI

struct AvatarExample: View {
  var body: some View {
    Avatar(url: URL(string: "https://i.pravatar.cc/150?img=5"), initials: "AL")
      .accessibilityLabel(Text("Ada Lovelace"))
  }
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

class AvatarPerson(val name: String, val initials: String, val tones: @Composable () -> List<Color>)

val avatarPeople = listOf(
    AvatarPerson("Ada Lovelace", "AL") { listOf(Palette.pink500, Palette.purple500) },

Avatar is a round View that holds an AvatarImage and an AvatarFallback. The image stays hidden until it loads, and the fallback is shown while it loads or if it fails. Four sizes are available: sm, default, lg and xl; the fallback text, icons and badge scale with the size.

AvatarBadge adds a small status dot in the bottom-end corner, and AvatarGroup overlaps several avatars with an outline between them, with AvatarGroupCount for the remaining number.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/avatar

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add avatar

$ pnpm dlx @esuiss/ui@latest add avatar --platform swift

$ pnpm dlx @esuiss/ui@latest add avatar --platform kotlin

The CLI also adds what it builds on: Icon, Text.

Manual

Install the dependencies:

npx expo install cn

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

uniwind/components/ui/avatar.tsx

import { cn } from "cn"
import * as React from "react"
import { View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { resolveClassName } from "@/components/primitives/use-render"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, string> = {
  sm: "size-6",

Update the import paths to match your project.

Install the dependencies:

npx expo install cn

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

nativewind/components/ui/avatar.tsx

import { cn } from "cn"
import * as React from "react"
import { View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { resolveClassName } from "@/components/primitives/use-render"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, string> = {
  sm: "size-6",

Update the import paths to match your project.

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

stylesheet/components/ui/avatar.tsx

import * as React from "react"
import { StyleSheet, View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { IconSizeContext } from "@/components/ui/icon"
import { Text, TextStyleContext } from "@/components/ui/text"
import { fontSize, radius, useTheme } from "@/components/ui/theme"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, number> = {
  sm: 24,
  default: 32,

Update the import paths to match your project.

Target iOS 17 or later.
Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Avatar.swift

import SwiftUI

public enum AvatarSize: CaseIterable, Sendable {
  case sm, `default`, lg, xl

  var dimension: CGFloat {
    switch self {
    case .sm: 24
    case .default: 32
    case .lg: 40
    case .xl: 64
    }
  }

  var overlap: CGFloat {
    self == .xl ? 16 : 8

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Avatar.kt

package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

Update the com.esuiss.ui package names to match your project.

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage
    alt="Ada Lovelace"
    source={{ uri: "https://i.pravatar.cc/150?img=5" }}
  />
  <AvatarFallback>
    <Text>AL</Text>
  </AvatarFallback>
</Avatar>

Give AvatarImage a source and an alt. Put initials or an Icon in AvatarFallback; plain strings are wrapped in Text. Use delay on the fallback to avoid a flash on fast connections, and onLoadingStatusChange on the image to react to loading.

Set size on each Avatar, and pass the same size to AvatarGroupCount. On the sm size, the badge hides its children and shows a plain dot.

Examples

Fallback

Initials shown when there is no image.

iOS

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

export function AvatarFallbackExample() {
  return (
    <Avatar accessibilityLabel="Alan Turing">
      <AvatarFallback>
        <Text>AT</Text>
      </AvatarFallback>
    </Avatar>
  )
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback

@Composable
fun AvatarFallbackOnly() {
    Row {
        Avatar(
            modifier = Modifier.semantics { contentDescription = "Alan Turing" },
            fallback = { AvatarFallback("AT") },
        )
    }

Sizes

The sm, default, lg and xl sizes.

iOS

import { View } from "react-native"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Text } from "@/components/ui/text"

export function AvatarSizesExample() {
  return (
    <View className="flex-row items-center gap-4">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarImage
            alt="Ada Lovelace"
            source={{ uri: "https://i.pravatar.cc/150?img=5" }}
          />
          <AvatarFallback>
            <Text>AL</Text>
          </AvatarFallback>

import EsuissUI
import SwiftUI

struct AvatarSizesExample: View {
  var body: some View {
    HStack(spacing: 16) {
      ForEach(AvatarSize.allCases, id: \.self) { size in
        Avatar(url: URL(string: "https://i.pravatar.cc/150?img=5"), initials: "AL", size: size)
          .accessibilityLabel(Text("Ada Lovelace"))
      }
    }
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

class AvatarPerson(val name: String, val initials: String, val tones: @Composable () -> List<Color>)

Group

Overlapping avatars in an AvatarGroup with a count.

iOS

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

const people = [
  {
    name: "Ada Lovelace",
    initials: "AL",
    uri: "https://i.pravatar.cc/150?img=5",
  },
  {
    name: "Alan Turing",
    initials: "AT",
    uri: "https://i.pravatar.cc/150?img=12",
  },
  {
    name: "Grace Hopper",

import EsuissUI
import SwiftUI

struct AvatarGroupExample: View {
  var body: some View {
    AvatarGroup {
      ForEach(avatarPeople, id: \.name) { person in
        Avatar(url: URL(string: person.uri), initials: person.initials)
          .accessibilityLabel(Text(verbatim: person.name))
      }
      AvatarGroupCount("+4")
        .accessibilityLabel(Text("4 more"))
    }
  }
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarGroup
import com.esuiss.ui.components.AvatarGroupCount
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

With badge

A check badge at each size.

iOS

import { CheckIcon } from "phosphor-react-native"
import { View } from "react-native"
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"

export function AvatarWithBadgeExample() {
  return (
    <View className="flex-row items-center gap-4">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarImage
            alt="Alan Turing"
            source={{ uri: "https://i.pravatar.cc/150?img=12" }}
          />
          <AvatarFallback>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct AvatarWithBadgeExample: View {
  var body: some View {
    HStack(spacing: 16) {
      ForEach(AvatarSize.allCases, id: \.self) { size in
        Avatar(size: size) {
          AvatarFallback("AT")
          AvatarImage(url: URL(string: "https://i.pravatar.cc/150?img=12"))
          AvatarBadge(icon: Ph.check.bold)
        }
        .accessibilityLabel(Text("Alan Turing"))
      }
    }

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Bold
import com.adamglin.phosphoricons.bold.Check
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarBadge
import com.esuiss.ui.components.AvatarFallback

API Reference

Avatar

Round container that sets the size.

Prop	Type	Default	Description
`size`	`AvatarSize`	`"default"`	`sm`, `default`, `lg` or `xl`.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Root>.

AvatarImage

Image that appears once it has loaded.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Image>.

AvatarFallback

Initials or icon shown while the image is missing.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Fallback>.

AvatarBadge

Status dot in the bottom-end corner.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

AvatarGroup

Row that overlaps its avatars.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

AvatarGroupCount

Round counter for the remaining items in a group.

Prop	Type	Default	Description
`size`	`AvatarSize`	`"default"`	Matches the size of the avatars in the group.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

Accessibility

AvatarImage uses alt as its accessibilityLabel.
The image is hidden from screen readers until it has loaded.
The badge has no label; describe the status in nearby text if it matters.

Notes

Uses bg-muted-foreground, bg-primary, bg-muted and border-background tokens; the fallback is softer in dark mode.
Light and dark follow the system appearance.

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

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/avatar

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add avatar

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

Copy the source into components/ui/avatar.tsx:

components/ui/avatar.tsx

"use client"

import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
import type * as React from "react"
import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: AvatarPrimitive.Root.Props & {
  size?: "default" | "sm" | "lg" | "xl"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"

Update the import paths to match your project.

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src={people[0].src} alt={people[0].name} />
  <AvatarFallback>{people[0].initials}</AvatarFallback>
</Avatar>

Always provide an AvatarFallback alongside AvatarImage, usually the person's initials. The fallback can also hold an icon, which scales to 60% of the avatar.

Set size on each Avatar. Inside an AvatarGroup, AvatarGroupCount matches the size of the avatars in the group automatically.

Examples

Fallback

Shows initials when no image is provided.

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export default function AvatarFallbackExample() {
  return (
    <Avatar>
      <AvatarFallback>LC</AvatarFallback>
    </Avatar>
  )
}

Fallback sizes

Initials fallbacks at every size.

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

Placeholder

Uses a person icon as the fallback at every size.

import { UserIcon } from "@phosphor-icons/react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export default function AvatarPlaceholder() {
  return (
    <div className="flex items-center gap-3">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarFallback>
            <UserIcon className="fill-current" />
          </AvatarFallback>
        </Avatar>
      ))}
    </div>
  )
}

Sizes

Image avatars in the sm, default, lg and xl sizes.

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

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",
    initials: "LC",
    src: "https://i.pravatar.cc/128?img=12",
  },
  {
    name: "Sofia Martinez",
    initials: "SM",

With badge

Adds a check-mark status badge to each size.

import { CheckIcon } from "@phosphor-icons/react"
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",

Group

Overlaps several avatars and ends with a +4 count.

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {
    name: "Liam Carter",

Group with icon count

A large group whose count shows a plus icon instead of a number.

import { PlusIcon } from "@phosphor-icons/react"
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const people = [
  {
    name: "Emma Wilson",
    initials: "EW",
    src: "https://i.pravatar.cc/128?img=47",
  },
  {

API Reference

Anatomy9 parts

</Avatar>

</Avatar>

</AvatarGroup>

Avatar

The circular root that sets the size.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "xl"`	`"default"`	Diameter of the avatar: `sm`, `default`, `lg` or `xl`. Also scales the fallback text and badge.

Also accepts the props of the primitive part it wraps.

AvatarImage

The person's image, cropped to a circle.

Also accepts the props of the primitive part it wraps.

AvatarFallback

Content shown when the image is missing or still loading.

Also accepts the props of the primitive part it wraps.

AvatarBadge

A small status indicator pinned to the bottom-end corner.

Also accepts the props of React.ComponentProps<"span">.

AvatarGroup

A row that overlaps avatars with a ring between them.

Also accepts the props of React.ComponentProps<"div">.

AvatarGroupCount

A trailing circle that shows how many avatars are not displayed.

Also accepts the props of React.ComponentProps<"div">.

Accessibility

Give AvatarImage an alt that names the person.
AvatarBadge and AvatarGroupCount are plain elements; if they carry meaning, label them or describe the status in nearby text.

Notes

Styling hooks: data-slot="avatar", "avatar-image", "avatar-fallback", "avatar-badge", "avatar-group" and "avatar-group-count", plus data-size on the root.
AvatarBadge uses bg-primary by default; override it, for example with bg-green-500. At the sm size, icons inside the badge are hidden.
The fallback uses a vertical gradient of muted-foreground with text-primary-foreground.

iOS

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

export function AvatarExample() {
  return (
    <Avatar>
      <AvatarImage
        alt="Ada Lovelace"
        source={{ uri: "https://i.pravatar.cc/150?img=5" }}
      />
      <AvatarFallback>
        <Text>AL</Text>
      </AvatarFallback>
    </Avatar>
  )
}

import EsuissUI
import SwiftUI

struct AvatarExample: View {
  var body: some View {
    Avatar(url: URL(string: "https://i.pravatar.cc/150?img=5"), initials: "AL")
      .accessibilityLabel(Text("Ada Lovelace"))
  }
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

class AvatarPerson(val name: String, val initials: String, val tones: @Composable () -> List<Color>)

val avatarPeople = listOf(
    AvatarPerson("Ada Lovelace", "AL") { listOf(Palette.pink500, Palette.purple500) },

AvatarBadge adds a small status dot in the bottom-end corner, and AvatarGroup overlaps several avatars with an outline between them, with AvatarGroupCount for the remaining number.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/avatar

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add avatar

$ pnpm dlx @esuiss/ui@latest add avatar --platform swift

$ pnpm dlx @esuiss/ui@latest add avatar --platform kotlin

The CLI also adds what it builds on: Icon, Text.

Manual

Install the dependencies:

npx expo install cn

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

uniwind/components/ui/avatar.tsx

import { cn } from "cn"
import * as React from "react"
import { View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { resolveClassName } from "@/components/primitives/use-render"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, string> = {
  sm: "size-6",

Update the import paths to match your project.

Install the dependencies:

npx expo install cn

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

nativewind/components/ui/avatar.tsx

import { cn } from "cn"
import * as React from "react"
import { View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { resolveClassName } from "@/components/primitives/use-render"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, string> = {
  sm: "size-6",

Update the import paths to match your project.

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/avatar.tsx, components/primitives/use-render.tsx.
Copy the source into components/ui/avatar.tsx:

stylesheet/components/ui/avatar.tsx

import * as React from "react"
import { StyleSheet, View } from "react-native"
import * as AvatarPrimitive from "@/components/primitives/avatar"
import { IconSizeContext } from "@/components/ui/icon"
import { Text, TextStyleContext } from "@/components/ui/text"
import { fontSize, radius, useTheme } from "@/components/ui/theme"

type AvatarSize = "default" | "sm" | "lg" | "xl"

const AvatarSizeContext = React.createContext<AvatarSize>("default")

const AvatarGroupItemContext = React.createContext<number | null>(null)

const ROOT_SIZE: Record<AvatarSize, number> = {
  sm: 24,
  default: 32,

Update the import paths to match your project.

Target iOS 17 or later.
Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Avatar.swift

import SwiftUI

public enum AvatarSize: CaseIterable, Sendable {
  case sm, `default`, lg, xl

  var dimension: CGFloat {
    switch self {
    case .sm: 24
    case .default: 32
    case .lg: 40
    case .xl: 64
    }
  }

  var overlap: CGFloat {
    self == .xl ? 16 : 8

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Avatar.kt

package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

Update the com.esuiss.ui package names to match your project.

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage
    alt="Ada Lovelace"
    source={{ uri: "https://i.pravatar.cc/150?img=5" }}
  />
  <AvatarFallback>
    <Text>AL</Text>
  </AvatarFallback>
</Avatar>

Set size on each Avatar, and pass the same size to AvatarGroupCount. On the sm size, the badge hides its children and shows a plain dot.

Examples

Fallback

Initials shown when there is no image.

iOS

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

export function AvatarFallbackExample() {
  return (
    <Avatar accessibilityLabel="Alan Turing">
      <AvatarFallback>
        <Text>AT</Text>
      </AvatarFallback>
    </Avatar>
  )
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback

@Composable
fun AvatarFallbackOnly() {
    Row {
        Avatar(
            modifier = Modifier.semantics { contentDescription = "Alan Turing" },
            fallback = { AvatarFallback("AT") },
        )
    }

Sizes

The sm, default, lg and xl sizes.

iOS

import { View } from "react-native"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Text } from "@/components/ui/text"

export function AvatarSizesExample() {
  return (
    <View className="flex-row items-center gap-4">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarImage
            alt="Ada Lovelace"
            source={{ uri: "https://i.pravatar.cc/150?img=5" }}
          />
          <AvatarFallback>
            <Text>AL</Text>
          </AvatarFallback>

import EsuissUI
import SwiftUI

struct AvatarSizesExample: View {
  var body: some View {
    HStack(spacing: 16) {
      ForEach(AvatarSize.allCases, id: \.self) { size in
        Avatar(url: URL(string: "https://i.pravatar.cc/150?img=5"), initials: "AL", size: size)
          .accessibilityLabel(Text("Ada Lovelace"))
      }
    }
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

class AvatarPerson(val name: String, val initials: String, val tones: @Composable () -> List<Color>)

Group

Overlapping avatars in an AvatarGroup with a count.

iOS

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

const people = [
  {
    name: "Ada Lovelace",
    initials: "AL",
    uri: "https://i.pravatar.cc/150?img=5",
  },
  {
    name: "Alan Turing",
    initials: "AT",
    uri: "https://i.pravatar.cc/150?img=12",
  },
  {
    name: "Grace Hopper",

import EsuissUI
import SwiftUI

struct AvatarGroupExample: View {
  var body: some View {
    AvatarGroup {
      ForEach(avatarPeople, id: \.name) { person in
        Avatar(url: URL(string: person.uri), initials: person.initials)
          .accessibilityLabel(Text(verbatim: person.name))
      }
      AvatarGroupCount("+4")
        .accessibilityLabel(Text("4 more"))
    }
  }
}

import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarFallback
import com.esuiss.ui.components.AvatarGroup
import com.esuiss.ui.components.AvatarGroupCount
import com.esuiss.ui.components.AvatarSize
import com.esuiss.ui.theme.Palette

With badge

A check badge at each size.

iOS

import { CheckIcon } from "phosphor-react-native"
import { View } from "react-native"
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"

export function AvatarWithBadgeExample() {
  return (
    <View className="flex-row items-center gap-4">
      {(["sm", "default", "lg", "xl"] as const).map((size) => (
        <Avatar key={size} size={size}>
          <AvatarImage
            alt="Alan Turing"
            source={{ uri: "https://i.pravatar.cc/150?img=12" }}
          />
          <AvatarFallback>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct AvatarWithBadgeExample: View {
  var body: some View {
    HStack(spacing: 16) {
      ForEach(AvatarSize.allCases, id: \.self) { size in
        Avatar(size: size) {
          AvatarFallback("AT")
          AvatarImage(url: URL(string: "https://i.pravatar.cc/150?img=12"))
          AvatarBadge(icon: Ph.check.bold)
        }
        .accessibilityLabel(Text("Alan Turing"))
      }
    }

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.BrushPainter
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Bold
import com.adamglin.phosphoricons.bold.Check
import com.esuiss.ui.components.Avatar
import com.esuiss.ui.components.AvatarBadge
import com.esuiss.ui.components.AvatarFallback

API Reference

Avatar

Round container that sets the size.

Prop	Type	Default	Description
`size`	`AvatarSize`	`"default"`	`sm`, `default`, `lg` or `xl`.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Root>.

AvatarImage

Image that appears once it has loaded.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Image>.

AvatarFallback

Initials or icon shown while the image is missing.

Also accepts the props of React.ComponentProps<typeof AvatarPrimitive.Fallback>.

AvatarBadge

Status dot in the bottom-end corner.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

AvatarGroup

Row that overlaps its avatars.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

AvatarGroupCount

Round counter for the remaining items in a group.

Prop	Type	Default	Description
`size`	`AvatarSize`	`"default"`	Matches the size of the avatars in the group.

Also accepts the props of React.ComponentProps<typeof View>, React.RefAttributes<View>.

Accessibility

AvatarImage uses alt as its accessibilityLabel.
The image is hidden from screen readers until it has loaded.
The badge has no label; describe the status in nearby text if it matters.

Notes

Uses bg-muted-foreground, bg-primary, bg-muted and border-background tokens; the fallback is softer in dark mode.
Light and dark follow the system appearance.