Cardsanimated

Invoice Summary

Invoice summary card listing line items with an animated total reveal bar.

Invoice #2041

Design$420

Hosting$60

Tax$48

Total$528

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 InvoiceSummaryCard() {
  val bar = remember { Animatable(0f) }
  LaunchedEffect(Unit) { bar.animateTo(1f, tween(800)) }
  OutlinedCard(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(18.dp)
  ) {
    Column(Modifier.padding(18.dp)) {
      Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Filled.Receipt, null,
          modifier = Modifier.size(20.dp))
        Spacer(Modifier.width(8.dp))
        Text("Invoice #2041",
          style = MaterialTheme.typography.titleSmall,
          fontWeight = FontWeight.SemiBold)
      }
      Spacer(Modifier.height(12.dp))
      listOf(
        "Design" to "$420",
        "Hosting" to "$60",
        "Tax" to "$48"
      ).forEach { (k, v) ->
        Row(Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
          Text(k, Modifier.weight(1f),
            color = MaterialTheme.colorScheme.onSurfaceVariant)
          Text(v)
        }
      }
      Spacer(Modifier.height(10.dp))
      Box(
        Modifier
          .fillMaxWidth(bar.value)
          .height(2.dp)
          .background(MaterialTheme.colorScheme.primary)
      )
      Spacer(Modifier.height(10.dp))
      Row(Modifier.fillMaxWidth()) {
        Text("Total", Modifier.weight(1f),
          fontWeight = FontWeight.Bold)
        Text("$528", fontWeight = FontWeight.Bold)
      }
    }
  }
}