Cardsanimated

Error Alert

An error alert that shakes briefly to draw urgent attention.

<Card className="w-64 mx-auto border-l-4 border-l-red-500 animate-[wiggle_0.4s_ease-in-out]"> <CardContent className="flex items-center gap-3 p-4"> <AlertCircle className="size-5 text-red-500" /> <span className="text-sm text-foreground">Upload failed. Please try again.</span> </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 ErrorAlert(trigger: Int) {
    val shake = remember { Animatable(0f) }
    LaunchedEffect(trigger) {
        shake.animateTo(
            0f,
            animationSpec = keyframes {
                durationMillis = 360
                (-8f) at 60; 8f at 120; (-6f) at 200
                4f at 280; 0f at 360
            }
        )
    }
    OutlinedCard(
        shape = RoundedCornerShape(14.dp),
        modifier = Modifier
            .offset(x = shake.value.dp)
            .padding(12.dp)
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Icon(
                Icons.Rounded.Error,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.error
            )
            Text("Upload failed. Please try again.")
        }
    }
}