Badgesanimated

Trend spark

A growth chip whose sparkline draws on next to a rising percentage.

+12.4%

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

var shown by remember { mutableStateOf(false) }
LaunchedEffect(Unit) { shown = true }
val p by animateFloatAsState(
    targetValue = if (shown) 1f else 0f,
    animationSpec = tween(1100, easing = EaseOutCubic),
    label = "line",
)
val green = Color(0xFF16A34A)
Surface(
    shape = RoundedCornerShape(50),
    color = green.copy(alpha = 0.12f),
    contentColor = green,
) {
    Row(
        Modifier.padding(start = 8.dp, end = 10.dp, top = 4.dp, bottom = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        Canvas(Modifier.size(width = 24.dp, height = 12.dp)) {
            val pts = listOf(0f to 0.8f, 0.3f to 0.55f, 0.55f to 0.7f, 1f to 0.1f)
            val path = Path()
            pts.forEachIndexed { i, (fx, fy) ->
                val x = size.width * fx
                val y = size.height * fy
                if (i == 0) path.moveTo(x, y) else path.lineTo(x, y)
            }
            val m = PathMeasure().apply { setPath(path, false) }
            drawPath(
                Path().also { m.getSegment(0f, m.length * p, it, true) },
                color = green,
                style = Stroke(2.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round),
            )
        }
        Text("+12.4%", fontSize = 12.sp, fontWeight = FontWeight.SemiBold)
    }
}