Cards
<Card className="w-64 mx-auto">
<CardContent className="flex flex-col gap-3 p-4">
<div className="h-3 w-2/3 rounded bg-muted animate-pulse" />
<div className="h-3 w-full rounded bg-muted animate-pulse" />
<div className="h-3 w-1/2 rounded bg-muted animate-pulse" />
</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 LoadingShimmer() {
val x by rememberInfiniteTransition().animateFloat(
initialValue = -200f,
targetValue = 400f,
animationSpec = infiniteRepeatable(tween(1200))
)
val brush = Brush.linearGradient(
colors = listOf(
MaterialTheme.colorScheme.surfaceVariant,
MaterialTheme.colorScheme.surface,
MaterialTheme.colorScheme.surfaceVariant
),
start = Offset(x, 0f),
end = Offset(x + 200f, 0f)
)
Card(
shape = RoundedCornerShape(14.dp),
modifier = Modifier.padding(12.dp)
) {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
Box(
Modifier
.fillMaxWidth(0.7f)
.height(14.dp)
.background(brush, RoundedCornerShape(6.dp))
)
Box(
Modifier
.fillMaxWidth()
.height(14.dp)
.background(brush, RoundedCornerShape(6.dp))
)
}
}
}