Cardsanimated

UV Index

UV exposure card with a radial sun glow and protection advice for the day.

UV Index

7 High

Use SPF 30+

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 UvIndexCard() {
  val t = rememberInfiniteTransition(label = "uv")
  val glow by t.animateFloat(
    0.85f, 1.1f,
    infiniteRepeatable(
      tween(1400), repeatMode = RepeatMode.Reverse
    ), label = "glow"
  )
  ElevatedCard(Modifier.fillMaxWidth()) {
    Row(
      Modifier.padding(20.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Canvas(Modifier.size(72.dp)) {
        drawCircle(
          Color(0xFFFFCC00).copy(alpha = 0.3f),
          radius = size.minDimension / 2 * glow
        )
        drawCircle(
          Color(0xFFFF9500),
          radius = size.minDimension / 3
        )
      }
      Spacer(Modifier.width(18.dp))
      Column {
        Text(
          "UV Index",
          color = MaterialTheme.colorScheme.onSurfaceVariant
        )
        Text(
          "7 High",
          style = MaterialTheme.typography.headlineSmall
        )
        Text(
          "Use SPF 30+",
          style = MaterialTheme.typography.labelMedium
        )
      }
    }
  }
}