Workout Summary

Post-run summary grouping duration, distance and pace beneath a header badge.

Morning Run

Today · 7:05 AM

42:18

Time

8.2 km

Distance

5:09

Pace

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 WorkoutSummaryCard() {
  data class Stat(val k: String, val v: String)
  val stats = listOf(
    Stat("Time", "42:18"),
    Stat("Distance", "8.2 km"),
    Stat("Pace", "5:09")
  )
  OutlinedCard(Modifier.fillMaxWidth()) {
    Column(Modifier.padding(20.dp)) {
      Row(verticalAlignment = Alignment.CenterVertically) {
        Box(
          Modifier.size(36.dp).background(
            MaterialTheme.colorScheme.primary, CircleShape
          )
        )
        Spacer(Modifier.width(12.dp))
        Column {
          Text(
            "Morning Run",
            style = MaterialTheme.typography.titleMedium
          )
          Text(
            "Today · 7:05 AM",
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme
              .onSurfaceVariant
          )
        }
      }
      Spacer(Modifier.height(16.dp))
      Row(
        Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
      ) {
        stats.forEach { s ->
          Column(
            horizontalAlignment =
              Alignment.CenterHorizontally
          ) {
            Text(
              s.v,
              style = MaterialTheme.typography.titleLarge
            )
            Text(
              s.k,
              style = MaterialTheme.typography.labelSmall,
              color = MaterialTheme.colorScheme
                .onSurfaceVariant
            )
          }
        }
      }
    }
  }
}