Group Avatars Stack

Group card showing overlapping member avatars with an overflow count chip.

ALBOCYDI+8

Design Crew

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun GroupAvatarsCard() {
    val people = listOf("AL", "BO", "CY", "DI")
    Card(
        modifier = Modifier.width(280.dp),
        shape = RoundedCornerShape(18.dp)
    ) {
        Row(
            Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box {
                people.forEachIndexed { i, p ->
                    Box(
                        Modifier
                            .padding(start = (i * 22).dp)
                            .size(36.dp)
                            .clip(CircleShape)
                            .background(
                                MaterialTheme.colorScheme.surface
                            )
                            .padding(2.dp)
                            .clip(CircleShape)
                            .background(
                                MaterialTheme.colorScheme.primary
                            ),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            p,
                            style = MaterialTheme.typography
                                .labelSmall
                        )
                    }
                }
            }
            Spacer(Modifier.width(12.dp))
            Text(
                "+8 in Design Crew",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}