Cardsanimated

Quantity Stepper

Cart line card with an animated plus minus quantity stepper control.

Espresso Beans

$18

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 QuantityStepperCard() {
  var qty by remember { mutableStateOf(1) }
  Card(
    modifier = Modifier.width(260.dp),
    shape = RoundedCornerShape(18.dp)
  ) {
    Row(
      Modifier.padding(14.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Box(
        Modifier
          .size(56.dp)
          .clip(RoundedCornerShape(12.dp))
          .background(MaterialTheme.colorScheme.surfaceVariant)
      )
      Spacer(Modifier.width(12.dp))
      Column(Modifier.weight(1f)) {
        Text("Coffee Mug", style = MaterialTheme.typography.titleSmall)
        Text("$18.00", color = MaterialTheme.colorScheme.primary)
      }
      OutlinedIconButton(onClick = { if (qty > 1) qty-- }) {
        Icon(Icons.Default.Remove, null)
      }
      AnimatedContent(qty, label = "q") { Text("$it",
        Modifier.padding(horizontal = 8.dp)) }
      OutlinedIconButton(onClick = { qty++ }) {
        Icon(Icons.Default.Add, null)
      }
    }
  }
}