Cardsanimated

Upload Progress

An upload card with an arrow and live percentage indicator.

<Card className="w-64 mx-auto border-dashed"> <CardContent className="flex flex-col gap-2 p-4"> <div className="flex items-center gap-2"> <Upload className="size-4 text-primary" /> <span className="text-sm text-foreground">Uploading photo…</span> <span className="ml-auto text-xs text-muted-foreground">38%</span> </div> <div className="h-2 w-full rounded-full bg-muted overflow-hidden"> <div className="h-full w-[38%] rounded-full bg-primary transition-all" /> </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 UploadProgress(target: Float) {
    val progress by animateFloatAsState(
        targetValue = target,
        animationSpec = tween(600),
        label = "up"
    )
    OutlinedCard(
        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.Upload,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.primary
                )
                Text("Uploading photo…")
                Spacer(Modifier.weight(1f))
                Text("${'$'}{(progress * 100).toInt()}%")
            }
            LinearProgressIndicator(
                progress = { progress },
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}