Cardsanimated

Success Toast

A success toast that slides in from the edge with a check.

<Card className="w-64 mx-auto border-l-4 border-l-emerald-500 shadow-lg animate-in slide-in-from-right-6 fade-in duration-500"> <CardContent className="flex items-center gap-3 p-4"> <CheckCircle2 className="size-5 text-emerald-500" /> <div className="flex flex-col"> <span className="text-sm font-semibold text-foreground">Saved</span> <span className="text-xs text-muted-foreground">Your changes are live.</span> </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 SuccessToast(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = slideInHorizontally { it } + fadeIn(),
        exit = slideOutHorizontally { it } + fadeOut()
    ) {
        ElevatedCard(
            shape = RoundedCornerShape(14.dp),
            modifier = Modifier.padding(12.dp)
        ) {
            Row(
                modifier = Modifier.padding(16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Icon(
                    Icons.Rounded.CheckCircle,
                    contentDescription = null,
                    tint = Color(0xFF22C55E)
                )
                Column {
                    Text("Saved", style = MaterialTheme.typography.titleSmall)
                    Text(
                        "Your changes are live.",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }
            }
        }
    }
}