Cards
<Card className="w-64 mx-auto">
<CardContent className="flex flex-col gap-2 p-4">
<div className="flex items-center gap-2">
<HardDrive className="size-4 text-foreground" />
<span className="text-sm text-foreground">Storage</span>
<span className="ml-auto text-xs text-muted-foreground">82 / 128 GB</span>
</div>
<div className="h-2 w-full rounded-full bg-muted overflow-hidden">
<div className="h-full w-[64%] rounded-full bg-indigo-500 transition-all duration-700" />
</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 StorageUsage(usedRatio: Float) {
val fill by animateFloatAsState(
targetValue = usedRatio,
animationSpec = tween(800),
label = "store"
)
Card(
shape = RoundedCornerShape(14.dp),
modifier = Modifier.padding(12.dp)
) {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
Icon(Icons.Rounded.Storage, contentDescription = null)
Text("Storage")
Spacer(Modifier.weight(1f))
Text("82 / 128 GB")
}
LinearProgressIndicator(
progress = { fill },
modifier = Modifier.fillMaxWidth(),
trackColor = MaterialTheme.colorScheme.surfaceVariant
)
}
}
}