Cards
<Card className="w-60 mx-auto">
<CardContent className="flex flex-col items-center gap-1.5 p-5">
<Loader className="size-6 text-primary animate-spin" />
<span className="text-2xl font-bold text-foreground">#42</span>
<span className="text-xs text-muted-foreground">in line · ~3 min</span>
</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 QueuePosition(position: Int) {
val animated by animateIntAsState(
targetValue = position,
animationSpec = tween(600),
label = "queue"
)
OutlinedCard(
shape = RoundedCornerShape(16.dp),
modifier = Modifier.padding(12.dp)
) {
Column(
modifier = Modifier.padding(20.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
CircularProgressIndicator(
modifier = Modifier.size(28.dp),
strokeWidth = 2.dp
)
Text(
"#${'$'}animated",
style = MaterialTheme.typography.headlineSmall
)
Text(
"in line · ~3 min",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
}
}
}