Iconsanimated

Add to cart

A shopping cart that bumps as an item drops into it — confirming a product was added.

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 AddToCart(onAdd: () -> Unit) {
    var added by remember { mutableStateOf(false) }
    val drop by animateFloatAsState(if (added) 1f else 0f, tween(400, easing = EaseInCubic), label = "drop")
    val bump by animateFloatAsState(if (added) 1f else 0f, spring(Spring.DampingRatioMediumBouncy), label = "bump")
    Box(Modifier.size(40.dp).clickable { added = true; onAdd() }, contentAlignment = Alignment.Center) {
        if (drop < 1f) Box(Modifier.size(6.dp).offset(y = lerp((-12).dp, (-2).dp, drop)).background(MaterialTheme.colorScheme.primary, CircleShape).alpha(1f - drop))
        Icon(Icons.Filled.ShoppingCart, "Add to cart", tint = MaterialTheme.colorScheme.primary, modifier = Modifier.scale(1f + bump * 0.12f))
    }
    LaunchedEffect(added) { if (added) { delay(450); added = false } }
}