Cards
<Card className="w-64 mx-auto bg-emerald-50 dark:bg-emerald-950/40 border-emerald-200 dark:border-emerald-800">
<CardContent className="flex items-center gap-3 p-4">
<BatteryCharging className="size-5 text-emerald-600 dark:text-emerald-400 animate-pulse" />
<div className="flex flex-col">
<span className="text-sm font-semibold text-emerald-800 dark:text-emerald-200">Battery saver on</span>
<span className="text-xs text-emerald-700 dark:text-emerald-400">47% · charging</span>
</div>
</CardContent>
</Card>
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 BatterySaver(charging: Boolean) {
val glow by rememberInfiniteTransition().animateFloat(
initialValue = 0.5f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
tween(800), RepeatMode.Reverse
)
)
Surface(
shape = RoundedCornerShape(14.dp),
color = Color(0xFFDCFCE7),
modifier = Modifier.padding(12.dp)
) {
Row(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
Icon(
Icons.Rounded.BatteryChargingFull,
contentDescription = null,
tint = Color(0xFF16A34A).copy(
alpha = if (charging) glow else 1f
)
)
Column {
Text("Battery saver on", color = Color(0xFF166534))
Text(
"47% · charging",
style = MaterialTheme.typography.bodySmall,
color = Color(0xFF15803D)
)
}
}
}
}