Sleep Analytics

A dark health dashboard with semicircular sleep and strain gauges, deltas versus a 7-day average.

9:41

Upgrade

Today, 27 January

Sleep

↑ 23% vs 7-day avg

Optimal

Your sleep quality was excellent last night. Keep up your good sleep habits.

Strain

↓ 18% vs 7-day avg

Poor

Your strain level is high today. Consider taking it easy and prioritize recovery.

Home

Libraries

Analytics

Account

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 ArcGauge(value: Int, accent: Color, label: String) {
    Box(contentAlignment = Alignment.Center) {
        Canvas(Modifier.size(120.dp, 70.dp)) {
            val stroke = 10f
            drawArc(
                color = Color.White.copy(alpha = 0.1f),
                startAngle = 180f, sweepAngle = 180f, useCenter = false,
                style = Stroke(stroke, cap = StrokeCap.Round),
            )
            drawArc(
                color = accent,
                startAngle = 180f, sweepAngle = 180f * (value / 100f), useCenter = false,
                style = Stroke(stroke, cap = StrokeCap.Round),
            )
        }
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text("$value", color = accent, style = MaterialTheme.typography.headlineMedium,
                fontWeight = FontWeight.ExtraBold)
            Text(label, color = Color.White.copy(alpha = 0.5f),
                style = MaterialTheme.typography.labelSmall)
        }
    }
}

@Composable
fun SleepAnalyticsScreen() {
    Column(Modifier.fillMaxSize().background(Color(0xFF0A0A0A)).padding(16.dp)) {
        Text("Today, 27 January", color = Color.White.copy(alpha = 0.6f),
            style = MaterialTheme.typography.bodySmall)
        Surface(color = Color(0xFF141414), shape = RoundedCornerShape(16.dp),
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp)) {
            Column(Modifier.padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                ArcGauge(92, Color(0xFF34D399), "vs 7-day avg")
                Text("Optimal", color = Color(0xFF34D399), fontWeight = FontWeight.Bold)
                Text("Your sleep quality was excellent last night.",
                    color = Color.White.copy(alpha = 0.6f),
                    style = MaterialTheme.typography.bodySmall, textAlign = TextAlign.Center)
            }
        }
        Surface(color = Color(0xFF141414), shape = RoundedCornerShape(16.dp),
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp)) {
            Column(Modifier.padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                ArcGauge(36, Color(0xFFFB923C), "vs 7-day avg")
                Text("Poor", color = Color(0xFFFB923C), fontWeight = FontWeight.Bold)
            }
        }
    }
}