Cards
Cardsanimated

Calendar Day

Tear-off calendar day tile with animated flip reveal of the date.

JULY

12

Saturday

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 CalendarDayCard() {
  val flip = remember { Animatable(0f) }
  LaunchedEffect(Unit) {
    flip.animateTo(1f, tween(800, easing = FastOutSlowInEasing))
  }
  OutlinedCard(
    modifier = Modifier.width(140.dp).padding(16.dp)
  ) {
    Column(
      Modifier.fillMaxWidth(),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      Surface(
        color = Color(0xFFEF4444),
        modifier = Modifier.fillMaxWidth()
      ) {
        Text(
          "JULY",
          color = Color.White,
          modifier = Modifier.padding(6.dp)
            .align(Alignment.CenterHorizontally)
        )
      }
      Text(
        "12",
        style = MaterialTheme.typography.displaySmall,
        modifier = Modifier.padding(8.dp).graphicsLayer {
          rotationX = (1f - flip.value) * 90f
        }
      )
      Text(
        "Saturday",
        style = MaterialTheme.typography.bodySmall,
        modifier = Modifier.padding(bottom = 10.dp)
      )
    }
  }
}