Cardsanimated

Achievement Toast

An achievement toast that pops in with a celebratory badge bounce.

<Card className="w-64 mx-auto shadow-lg animate-in zoom-in-75 fade-in duration-500"> <CardContent className="flex items-center gap-3 p-4"> <Zap className="size-7 text-yellow-500" /> <div className="flex flex-col"> <span className="text-sm font-semibold text-foreground">Achievement unlocked!</span> <span className="text-xs text-muted-foreground">7-day streak 🔥</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 AchievementToast(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = scaleIn(
            spring(dampingRatio = Spring.DampingRatioMediumBouncy)
        ) + fadeIn(),
        exit = scaleOut() + fadeOut()
    ) {
        ElevatedCard(
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier.padding(12.dp)
        ) {
            Row(
                modifier = Modifier.padding(16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Icon(
                    Icons.Rounded.EmojiEvents,
                    contentDescription = null,
                    tint = Color(0xFFEAB308),
                    modifier = Modifier.size(32.dp)
                )
                Column {
                    Text("Achievement unlocked!")
                    Text(
                        "7-day streak 🔥",
                        style = MaterialTheme.typography.bodySmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }
            }
        }
    }
}