Cards
Cards

Version Changelog

A changelog card summarizing what shipped in the latest release.

<Card className="w-64 mx-auto"> <CardHeader className="flex-row items-center gap-2 pb-2"> <Zap className="size-4 text-primary" /> <CardTitle className="text-sm">What's new · v3.1</CardTitle> </CardHeader> <CardContent className="flex flex-col gap-1.5 text-xs text-foreground"> <span className="flex items-center gap-1.5"><Check className="size-3.5" />Faster cold start</span> <span className="flex items-center gap-1.5"><Check className="size-3.5" />Dark mode polish</span> <span className="flex items-center gap-1.5"><Check className="size-3.5" />Bug fixes</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 VersionChangelog() {
    Card(
        shape = RoundedCornerShape(16.dp),
        modifier = Modifier.padding(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Icon(
                    Icons.Rounded.Bolt,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.primary
                )
                Text("What's new · v3.1")
            }
            listOf(
                "Faster cold start",
                "Dark mode polish",
                "Bug fixes"
            ).forEach {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(6.dp)
                ) {
                    Icon(
                        Icons.Rounded.Check,
                        contentDescription = null,
                        modifier = Modifier.size(16.dp)
                    )
                    Text(it, style = MaterialTheme.typography.bodySmall)
                }
            }
        }
    }
}