Cardsanimated

Transaction List

Recent transactions list with rows fading and sliding in with staggered delays.

Recent Activity

Spotify-$9.99

Salary+$3,200

Grocery-$54.20

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 TransactionListCard() {
  data class Tx(val n: String, val a: String, val up: Boolean)
  val rows = listOf(
    Tx("Spotify", "-$9.99", false),
    Tx("Salary", "+$3,200", true),
    Tx("Grocery", "-$54.20", false)
  )
  Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(20.dp)
  ) {
    Column(Modifier.padding(16.dp)) {
      Text(
        "Recent Activity",
        style = MaterialTheme.typography.titleSmall,
        fontWeight = FontWeight.SemiBold
      )
      Spacer(Modifier.height(12.dp))
      rows.forEachIndexed { i, tx ->
        val a = remember { Animatable(0f) }
        LaunchedEffect(Unit) {
          delay(i * 120L)
          a.animateTo(1f, tween(400))
        }
        Row(
          Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp)
            .graphicsLayer {
              alpha = a.value
              translationX = (1f - a.value) * 40f
            },
          verticalAlignment = Alignment.CenterVertically
        ) {
          Icon(
            if (tx.up) Icons.Filled.ArrowDownRight
            else Icons.Filled.ArrowUpRight,
            null,
            tint = if (tx.up) Color(0xFF22C55E)
              else MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.size(18.dp)
          )
          Spacer(Modifier.width(12.dp))
          Text(tx.n, Modifier.weight(1f))
          Text(
            tx.a,
            fontWeight = FontWeight.Medium,
            color = if (tx.up) Color(0xFF22C55E)
              else MaterialTheme.colorScheme.onSurface
          )
        }
      }
    }
  }
}