Cards
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 ConversionFunnelCard() {
val stages = listOf(
"Visits" to 1f,
"Cart" to 0.62f,
"Checkout" to 0.38f,
"Purchase" to 0.21f,
)
Card(
shape = RoundedCornerShape(18.dp),
modifier = Modifier.width(260.dp),
) {
Column(Modifier.padding(18.dp)) {
Text(text = "Funnel", fontWeight = FontWeight.SemiBold)
Spacer(Modifier.height(12.dp))
stages.forEachIndexed { i, (label, frac) ->
val a = remember { Animatable(0f) }
LaunchedEffect(Unit) {
delay(i * 110L)
a.animateTo(frac, tween(600, easing = FastOutSlowInEasing))
}
Row(
Modifier.padding(vertical = 3.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
Modifier
.fillMaxWidth(a.value)
.height(20.dp)
.clip(RoundedCornerShape(6.dp))
.background(
Color(0xFF6366F1).copy(
alpha = 1f - i * 0.18f,
),
),
contentAlignment = Alignment.CenterStart,
) {
Text(
text = label,
color = Color.White,
style = MaterialTheme.typography.labelSmall,
modifier = Modifier.padding(start = 8.dp),
)
}
}
}
}
}
}