Meditate Browse

A meditation browse screen with filter tabs, a 2x2 mood collection grid and a mindfulness program list.

9:41

Meditate

BrowseCoachingProgramsShort/I

Find a meditation

See all

🔀

Pick for me

Shuffle

✨

Gratitude

Collection

🌙

Stressed out

Collection

❤️

Felling Sad

Collection

Mindfulness programs

See all

Emotional resilience in adversity

Course . 16 Sessions

Managing pain and illness

Course . 16 Sessions

🏠☀️🧠🎵

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

data class Collection(val title: String, val subtitle: String, val emoji: String, val tint: Color)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MeditateBrowseScreen(collections: List<Collection>, tabs: List<String>) {
    val lime = Color(0xFFA3E635)
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(16.dp),
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically) {
            Text("Meditate", style = MaterialTheme.typography.headlineSmall,
                fontWeight = FontWeight.ExtraBold)
            Row { 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),
        )
        ScrollableTabRow(selectedTabIndex = 0, edgePadding = 0.dp,
            modifier = Modifier.padding(top = 12.dp)) {
            tabs.forEachIndexed { i, t ->
                Tab(selected = i == 0, onClick = {}, text = { Text(t) })
            }
        }
        Text("Find a meditation", Modifier.padding(top = 16.dp),
            style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier.heightIn(max = 160.dp).padding(top = 8.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp),
        ) {
            items(collections) { c ->
                Surface(color = c.tint, shape = RoundedCornerShape(12.dp)) {
                    Row(Modifier.padding(10.dp), verticalAlignment = Alignment.CenterVertically) {
                        Text(c.emoji, fontSize = 16.sp)
                        Spacer(Modifier.width(8.dp))
                        Column {
                            Text(c.title, color = Color(0xFF1C1917),
                                style = MaterialTheme.typography.labelMedium,
                                fontWeight = FontWeight.Bold)
                            Text(c.subtitle, color = Color(0xFF57534E),
                                style = MaterialTheme.typography.labelSmall)
                        }
                    }
                }
            }
        }
    }
}