Cards
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 UpNextQueue(tracks: List<Pair<String, String>>) {
Card(
shape = RoundedCornerShape(20.dp),
modifier = Modifier.fillMaxWidth(),
) {
Column(Modifier.padding(16.dp)) {
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.List, contentDescription = null)
Spacer(Modifier.width(8.dp))
Text("Up Next", style = MaterialTheme.typography.titleMedium)
}
Spacer(Modifier.height(12.dp))
tracks.forEachIndexed { i, (t, a) ->
var shown by remember { mutableStateOf(false) }
LaunchedEffect(Unit) {
delay(i * 90L)
shown = true
}
val alpha by animateFloatAsState(
targetValue = if (shown) 1f else 0f,
label = "row$i",
)
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
.graphicsLayer { this.alpha = alpha }
.padding(vertical = 8.dp),
) {
Text(
"${i + 1}",
color = MaterialTheme.colorScheme.primary,
)
Spacer(Modifier.width(12.dp))
Column(Modifier.weight(1f)) {
Text(t, style = MaterialTheme.typography.bodyLarge)
Text(
a,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
Icon(Icons.Default.DragHandle, contentDescription = null)
}
}
}
}
}