Cardsanimated

Follow Toggle

Profile card with a follow button that morphs into a following state.

Leo Kim

Product Designer

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 FollowToggleCard() {
    var following by remember { mutableStateOf(false) }
    val bg by animateColorAsState(
        if (following)
            MaterialTheme.colorScheme.surfaceVariant
        else MaterialTheme.colorScheme.primary,
        tween(280), label = "bg"
    )
    ElevatedCard(
        modifier = Modifier.width(280.dp),
        shape = RoundedCornerShape(20.dp)
    ) {
        Row(
            Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                Modifier.size(46.dp).clip(CircleShape)
                    .background(MaterialTheme.colorScheme.tertiary),
                contentAlignment = Alignment.Center
            ) { Text("LK") }
            Spacer(Modifier.width(12.dp))
            Column(Modifier.weight(1f)) {
                Text(
                    "Leo Kim",
                    style = MaterialTheme.typography.titleSmall
                )
                Text(
                    "Product Designer",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme
                        .onSurfaceVariant
                )
            }
            Button(
                onClick = { following = !following },
                colors = ButtonDefaults.buttonColors(
                    containerColor = bg
                ),
                contentPadding = PaddingValues(
                    horizontal = 16.dp
                )
            ) {
                Crossfade(following, label = "lbl") {
                    Text(if (it) "Following" else "Follow")
                }
            }
        }
    }
}