Finster Cards

A banking cards screen with a teal VISA card, masked balance, quick actions and revealable card details.

9:41

Cards

finster

**** **** **** 3346

Choirul Syafril

VISA

12/28

Total balance

$1,400,512.31

Transfer

Top up

Withdraw

Card details

CVV***

Card number**** **** **** 3346

Home

Cards

Stocks

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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CardsScreen(cardName: String, last4: String, balance: String) {
    val teal = Color(0xFF115E59)
    Scaffold(topBar = {
        TopAppBar(title = { Text("Cards", fontWeight = FontWeight.Bold) })
    }) { padding ->
        Column(Modifier.fillMaxSize().padding(padding).padding(16.dp)) {
            Box(
                Modifier.fillMaxWidth().height(180.dp).clip(RoundedCornerShape(20.dp))
                    .background(Brush.linearGradient(listOf(teal, Color(0xFF064E3B))))
                    .padding(16.dp),
            ) {
                Text("finster", Modifier.align(Alignment.TopEnd),
                    color = Color.White, fontWeight = FontWeight.SemiBold)
                Text("**** **** **** $last4", Modifier.align(Alignment.CenterStart),
                    color = Color.White, letterSpacing = 2.sp)
                Text(cardName, Modifier.align(Alignment.BottomStart),
                    color = Color.White.copy(alpha = 0.8f),
                    style = MaterialTheme.typography.labelMedium)
                Text("VISA", Modifier.align(Alignment.BottomEnd),
                    color = Color.White, fontWeight = FontWeight.Bold,
                    fontStyle = FontStyle.Italic)
            }
            Text("Total balance", Modifier.padding(top = 16.dp),
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                style = MaterialTheme.typography.labelMedium)
            Text(balance, style = MaterialTheme.typography.headlineMedium,
                fontWeight = FontWeight.ExtraBold)
            Row(Modifier.fillMaxWidth().padding(top = 12.dp),
                horizontalArrangement = Arrangement.spacedBy(10.dp)) {
                listOf("Transfer", "Top up", "Withdraw").forEach { label ->
                    Surface(color = MaterialTheme.colorScheme.surfaceVariant,
                        shape = RoundedCornerShape(16.dp), modifier = Modifier.weight(1f)) {
                        Column(Modifier.padding(vertical = 12.dp),
                            horizontalAlignment = Alignment.CenterHorizontally) {
                            Icon(Icons.Filled.SwapHoriz, null, tint = teal)
                            Text(label, style = MaterialTheme.typography.labelSmall)
                        }
                    }
                }
            }
        }
    }
}