Cardsanimated

Security Alert

A security alert flagging a new sign-in from an unknown device.

<Card className="w-64 mx-auto border-l-4 border-l-red-500"> <CardContent className="flex flex-col gap-2 p-4"> <div className="flex items-center gap-2"> <Shield className="size-5 text-red-500 animate-pulse" /> <span className="text-sm font-semibold text-foreground">New sign-in detected</span> </div> <span className="text-xs text-muted-foreground">Chrome on Windows · Berlin</span> <Button className="mt-1 text-xs">Review activity</Button> </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 SecurityAlert(onReview: () -> Unit) {
    val pulse by rememberInfiniteTransition().animateFloat(
        initialValue = 1f,
        targetValue = 1.12f,
        animationSpec = infiniteRepeatable(
            tween(700), RepeatMode.Reverse
        )
    )
    ElevatedCard(
        shape = RoundedCornerShape(16.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.Shield,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.error,
                    modifier = Modifier.scale(pulse)
                )
                Text("New sign-in detected")
            }
            Text(
                "Chrome on Windows · Berlin",
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            Button(onClick = onReview) { Text("Review activity") }
        }
    }
}