Subscription Premium

A premium upsell with a billing toggle, a highlighted price card, a feature list and an upgrade action.

9:41

Subscription Plan

Unlock More. Go Premium

Unlock exclusive perks with a faster, smoother gaming experience.

MonthlyYearly

$18.99 /month

Unlock Skliight Premium and take full control of your productivity.

Features

Your AI coach for focus progress.

Powerful insights to performance

1000+ workouts fitness goal.

Enjoy an uninterrupted,

Offline access

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 SubscriptionScreen(price: String, features: List<String>, onUpgrade: () -> Unit) {
    val blue = Color(0xFF2563EB)
    var monthly by remember { mutableStateOf(true) }
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(20.dp),
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            IconButton(onClick = {}) { Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back") }
            Text("Subscription Plan", style = MaterialTheme.typography.titleMedium)
            IconButton(onClick = {}) { Icon(Icons.Filled.Close, "Close") }
        }
        Text("Unlock More. Go Premium",
            Modifier.fillMaxWidth().padding(top = 12.dp),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.ExtraBold)
        Text("Unlock exclusive perks with a faster, smoother experience.",
            Modifier.fillMaxWidth().padding(top = 8.dp), textAlign = TextAlign.Center,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant)
        Row(Modifier.fillMaxWidth().padding(top = 12.dp),
            horizontalArrangement = Arrangement.Center) {
            FilterChip(selected = monthly, onClick = { monthly = true },
                label = { Text("Monthly") })
            Spacer(Modifier.width(8.dp))
            FilterChip(selected = !monthly, onClick = { monthly = false },
                label = { Text("Yearly") })
        }
        OutlinedCard(
            Modifier.fillMaxWidth().padding(top = 16.dp),
            border = BorderStroke(1.5.dp, blue.copy(alpha = 0.4f)),
        ) {
            Column(Modifier.padding(16.dp)) {
                Text(price, style = MaterialTheme.typography.headlineSmall,
                    fontWeight = FontWeight.ExtraBold)
                Text("Take full control of your productivity.",
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    style = MaterialTheme.typography.bodySmall)
                HorizontalDivider(Modifier.padding(vertical = 12.dp))
                features.forEach { f ->
                    Row(Modifier.padding(vertical = 4.dp),
                        verticalAlignment = Alignment.CenterVertically) {
                        Icon(Icons.Filled.AutoAwesome, null, Modifier.size(16.dp), tint = blue)
                        Spacer(Modifier.width(8.dp))
                        Text(f, style = MaterialTheme.typography.bodySmall)
                    }
                }
            }
        }
        Spacer(Modifier.weight(1f))
        Button(onClick = onUpgrade, modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(14.dp),
            colors = ButtonDefaults.buttonColors(containerColor = blue)) {
            Text("Upgrade to Plan")
        }
    }
}