Chartsanimated

Trend tile

A KPI tile pairing a headline metric and delta with an inline area sparkline.

Revenue+12%

$48.2k

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 TrendTile(
    label: String = "Revenue",
    value: String = "$48.2k",
    delta: String = "+12%",
    spark: List<Float> = listOf(0.7f, 0.66f, 0.72f, 0.5f, 0.58f, 0.36f, 0.44f, 0.2f),
    modifier: Modifier = Modifier,
) {
    val accent = Color(0xFF10B981)
    Card(modifier.width(176.dp), shape = RoundedCornerShape(16.dp)) {
        Column(Modifier.padding(14.dp)) {
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(label, style = MaterialTheme.typography.labelMedium)
                Text(delta, color = accent, style = MaterialTheme.typography.labelSmall)
            }
            Text(value, style = MaterialTheme.typography.headlineSmall)
            Spacer(Modifier.height(8.dp))
            Canvas(Modifier.fillMaxWidth().height(36.dp)) {
                val step = size.width / (spark.size - 1)
                val path = Path().apply {
                    spark.forEachIndexed { i, v ->
                        val x = i * step
                        val y = size.height * v
                        if (i == 0) moveTo(x, y) else lineTo(x, y)
                    }
                }
                drawPath(path, accent, style = Stroke(2.5.dp.toPx(), cap = StrokeCap.Round))
            }
        }
    }
}