Cardsanimated

Undo Snackbar

A snackbar with an undo action and shrinking timeout bar.

<Card className="w-64 mx-auto bg-zinc-900 dark:bg-zinc-100"> <CardContent className="flex flex-col gap-2 p-0"> <div className="flex items-center p-4"> <span className="text-sm text-zinc-100 dark:text-zinc-900">Message deleted</span> <Button variant="ghost" className="ml-auto text-xs text-sky-400 dark:text-sky-600">UNDO</Button> </div> <div className="h-1 w-full bg-zinc-700 dark:bg-zinc-300 overflow-hidden"> <div className="h-full w-1/3 bg-sky-400 dark:bg-sky-600 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 UndoSnackbar(onUndo: () -> Unit) {
    val timer = remember { Animatable(1f) }
    LaunchedEffect(Unit) {
        timer.animateTo(0f, animationSpec = tween(4000))
    }
    Card(
        shape = RoundedCornerShape(12.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.inverseSurface
        ),
        modifier = Modifier.padding(12.dp)
    ) {
        Column {
            Row(
                modifier = Modifier.padding(16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    "Message deleted",
                    color = MaterialTheme.colorScheme.inverseOnSurface
                )
                Spacer(Modifier.weight(1f))
                TextButton(onClick = onUndo) { Text("UNDO") }
            }
            LinearProgressIndicator(
                progress = { timer.value },
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}