Charts
Users
Revenue
Churn
Sessions
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 SparklineGrid(
metrics: List<Pair<String, List<Float>>> = listOf(
"Users" to listOf(0.3f, 0.5f, 0.4f, 0.7f, 0.9f),
"Revenue" to listOf(0.6f, 0.55f, 0.7f, 0.5f, 0.8f),
"Churn" to listOf(0.8f, 0.7f, 0.75f, 0.5f, 0.4f),
"Sessions" to listOf(0.4f, 0.6f, 0.5f, 0.65f, 0.85f),
),
accent: Color = Color(0xFF6366F1),
modifier: Modifier = Modifier,
) {
val draw = remember { Animatable(0f) }
LaunchedEffect(Unit) { draw.animateTo(1f, tween(1000, easing = EaseOutCubic)) }
val grid = MaterialTheme.colorScheme.outlineVariant
Column(modifier, verticalArrangement = Arrangement.spacedBy(10.dp)) {
metrics.chunked(2).forEach { row ->
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
row.forEach { (label, pts) ->
Card(Modifier.width(82.dp), border = BorderStroke(1.dp, grid)) {
Column(Modifier.padding(8.dp)) {
Text(label, style = MaterialTheme.typography.labelSmall)
Canvas(Modifier.fillMaxWidth().height(24.dp)) {
val s = size.width / (pts.size - 1)
val p = Path()
pts.forEachIndexed { i, v ->
val x = i * s
val y = size.height * (1f - v)
if (i == 0) p.moveTo(x, y) else p.lineTo(x, y)
}
val m = PathMeasure().apply { setPath(p, false) }
drawPath(
Path().also { m.getSegment(0f, m.length * draw.value, it, true) },
accent,
style = Stroke(2.dp.toPx(), cap = StrokeCap.Round),
)
}
}
}
}
}
}
}
}