Trend Arrows Grid

A row of mini metrics each shows an up or down trend arrow.

CPU42%

RAM68%

Disk31%

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 TrendArrowsGridCard() {
  data class T(val label: String, val v: String, val up: Boolean)
  val items = listOf(
    T("CPU", "42%", false),
    T("RAM", "68%", true),
    T("Disk", "31%", true),
  )
  OutlinedCard(
    shape = RoundedCornerShape(18.dp),
    modifier = Modifier.width(260.dp),
  ) {
    Row(
      Modifier
        .padding(16.dp)
        .fillMaxWidth(),
      horizontalArrangement = Arrangement.SpaceBetween,
    ) {
      items.forEach { m ->
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
          Text(
            text = m.label,
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
          )
          Text(text = m.v, fontWeight = FontWeight.Bold)
          Icon(
            imageVector = if (m.up)
              Icons.Default.KeyboardArrowUp
            else Icons.Default.KeyboardArrowDown,
            contentDescription = null,
            tint = if (m.up) Color(0xFF22C55E)
            else Color(0xFFF43F5E),
            modifier = Modifier.size(16.dp),
          )
        }
      }
    }
  }
}