Cards
<Card className="w-64 mx-auto">
<CardContent className="flex items-center gap-3 p-4">
<div className="relative grid place-items-center">
<Clock className="size-8 text-amber-500 animate-pulse" />
</div>
<div className="flex flex-col">
<span className="text-sm font-semibold text-foreground">Too many requests</span>
<span className="text-xs text-muted-foreground">Retry in 18 s</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 RateLimitCooldown(seconds: Int) {
val sweep by animateFloatAsState(
targetValue = seconds / 30f,
animationSpec = tween(1000, easing = LinearEasing),
label = "cool"
)
OutlinedCard(
shape = RoundedCornerShape(14.dp),
modifier = Modifier.padding(12.dp)
) {
Row(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
Box(contentAlignment = Alignment.Center) {
CircularProgressIndicator(
progress = { sweep },
modifier = Modifier.size(36.dp),
strokeWidth = 3.dp
)
Icon(
Icons.Rounded.Lock,
contentDescription = null,
modifier = Modifier.size(16.dp)
)
}
Column {
Text("Too many requests")
Text(
"Retry in ${'$'}seconds s",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
}
}
}
}