Meditate Home

A wellness home with a mood picker, search, and locked morning meditation cards in a lime accent.

9:41

For you

Good evening Max!

How are you feeling today?

😄😠🙂😌😋

This is used to curate your daily plan.

Morning

Start your morning with meditation.

🧠

Mental Wellness

Cory Muscara

Coaching▶

🌀

Anxiety Isn't the Enemy

Melli O'Brien

☀️🧠🎵

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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MeditateHomeScreen(onMoodSelect: (Int) -> Unit) {
    val lime = Color(0xFFA3E635)
    val moods = listOf("😄", "😠", "🙂", "😌", "😋")
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(16.dp),
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Surface(shape = CircleShape, color = lime, modifier = Modifier.size(36.dp)) {}
            Spacer(Modifier.width(10.dp))
            Column(Modifier.weight(1f)) {
                Text("For you", fontWeight = FontWeight.Bold)
                Text("Good evening Max!", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant)
            }
            Icon(Icons.Outlined.WorkspacePremium, null)
            Spacer(Modifier.width(10.dp))
            Icon(Icons.Outlined.Notifications, null)
        }
        OutlinedTextField(
            value = "", onValueChange = {},
            placeholder = { Text("Search") },
            leadingIcon = { Icon(Icons.Filled.Search, null) },
            shape = CircleShape,
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
        )
        Text("How are you feeling today?", Modifier.padding(top = 16.dp),
            style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
        Row(Modifier.fillMaxWidth().padding(top = 12.dp),
            horizontalArrangement = Arrangement.SpaceBetween) {
            moods.forEachIndexed { i, m ->
                Surface(
                    onClick = { onMoodSelect(i) },
                    shape = CircleShape,
                    color = MaterialTheme.colorScheme.surfaceVariant,
                    modifier = Modifier.size(40.dp),
                ) { Box(contentAlignment = Alignment.Center) { Text(m, fontSize = 18.sp) } }
            }
        }
        Text("This is used to curate your daily plan.", Modifier.padding(top = 8.dp),
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant)
        Text("Morning", Modifier.padding(top = 16.dp),
            style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
        Surface(
            color = lime.copy(alpha = 0.4f), shape = RoundedCornerShape(16.dp),
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
        ) {
            ListItem(
                colors = ListItemDefaults.colors(containerColor = Color.Transparent),
                leadingContent = { Surface(shape = RoundedCornerShape(10.dp),
                    color = MaterialTheme.colorScheme.onBackground,
                    modifier = Modifier.size(36.dp)) {} },
                headlineContent = { Text("Mental Wellness", fontWeight = FontWeight.Bold) },
                supportingContent = { Text("Cory Muscara") },
                trailingContent = { Icon(Icons.Filled.Lock, null, Modifier.size(16.dp)) },
            )
        }
    }
}