Meditate Paywall

A premium plans screen with a countdown offer chip, three pricing tiers and a highlighted Pro feature card.

9:41

Welcome offer23H 59M

Enjoy premium tools on every plan

Weekly

$9.99

Per week

Best Deal

Annual

$99.99

Per year

Monthly

$19.99

Per month

🪷

Pro Plan

Explore advanced tools for mindfulness and meditation

Working labels

Session tracking

Course Formats

Draft sharing

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 MeditatePlan(val label: String, val price: String, val unit: String, val best: Boolean)

@Composable
fun MeditatePaywallScreen(plans: List<MeditatePlan>, perks: List<String>, onClose: () -> Unit) {
    val lime = Color(0xFFA3E635)
    val pink = Color(0xFFFBCFE8)
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(20.dp),
    ) {
        Box(Modifier.fillMaxWidth()) {
            IconButton(onClick = onClose, modifier = Modifier.align(Alignment.TopEnd)) {
                Icon(Icons.Filled.Close, "Close")
            }
        }
        Surface(color = lime.copy(alpha = 0.4f), shape = CircleShape,
            modifier = Modifier.align(Alignment.CenterHorizontally)) {
            Row(Modifier.padding(horizontal = 12.dp, vertical = 4.dp),
                verticalAlignment = Alignment.CenterVertically) {
                Text("Welcome offer", style = MaterialTheme.typography.labelSmall,
                    fontWeight = FontWeight.SemiBold)
                Spacer(Modifier.width(6.dp))
                Surface(color = MaterialTheme.colorScheme.onBackground, shape = CircleShape) {
                    Text("23H 59M", Modifier.padding(horizontal = 6.dp, vertical = 2.dp),
                        color = MaterialTheme.colorScheme.background,
                        style = MaterialTheme.typography.labelSmall)
                }
            }
        }
        Text("Enjoy premium tools on every plan",
            Modifier.fillMaxWidth().padding(top = 16.dp),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.ExtraBold)
        Row(Modifier.padding(top = 20.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalAlignment = Alignment.Bottom) {
            plans.forEach { pl ->
                Surface(
                    color = if (pl.best) lime else MaterialTheme.colorScheme.surface,
                    shape = RoundedCornerShape(16.dp),
                    border = if (pl.best) null
                        else BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
                    modifier = Modifier.weight(1f),
                ) {
                    Column(Modifier.padding(12.dp),
                        horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(pl.label, style = MaterialTheme.typography.labelSmall)
                        Text(pl.price, style = MaterialTheme.typography.titleMedium,
                            fontWeight = FontWeight.ExtraBold)
                        Text(pl.unit, style = MaterialTheme.typography.labelSmall)
                    }
                }
            }
        }
        Surface(color = pink, shape = RoundedCornerShape(20.dp),
            modifier = Modifier.fillMaxWidth().padding(top = 16.dp)) {
            Column(Modifier.padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
                Text("Pro Plan", style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.ExtraBold, color = Color(0xFF1C1917))
                Text("Explore advanced tools for mindfulness and meditation",
                    Modifier.padding(top = 4.dp), textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.bodySmall, color = Color(0xFF57534E))
                LazyVerticalGrid(
                    columns = GridCells.Fixed(2),
                    modifier = Modifier.heightIn(max = 100.dp).padding(top = 12.dp),
                    horizontalArrangement = Arrangement.spacedBy(8.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp),
                ) {
                    items(perks) { perk ->
                        Surface(color = Color.White.copy(alpha = 0.7f), shape = CircleShape) {
                            Row(Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
                                verticalAlignment = Alignment.CenterVertically) {
                                Icon(Icons.Filled.Check, null, Modifier.size(12.dp),
                                    tint = Color(0xFF059669))
                                Spacer(Modifier.width(4.dp))
                                Text(perk, color = Color(0xFF1C1917),
                                    style = MaterialTheme.typography.labelSmall)
                            }
                        }
                    }
                }
            }
        }
    }
}