Wallet James

A wallet home with a gradient greeting header, balance with growth, quick actions and a subscriptions list.

Hello, James!

Active your new card

🧑

Wallet(USD)

$8,502.00

+8.56 %

Latest transaction

◆

Sketch

Monthly payment

2024.02.03

-$12

♪

Spotify

Monthly payment

2024.02.03

-$10

▶

Youtube

Monthly payment

2024.02.03

-$8

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 Subscription(val name: String, val note: String, val date: String, val amount: String, val tint: Color)

@Composable
fun WalletHeaderScreen(balance: String, change: String, items: List<Subscription>) {
    Column(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
        Column(
            Modifier.fillMaxWidth()
                .background(Brush.linearGradient(listOf(Color(0xFF3B82F6), Color(0xFF7C3AED))))
                .padding(20.dp),
        ) {
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                Column {
                    Text("Hello, James!", color = Color.White,
                        style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.ExtraBold)
                    Text("Active your new card", color = Color.White.copy(alpha = 0.7f),
                        style = MaterialTheme.typography.labelSmall)
                }
                Surface(color = Color.White.copy(alpha = 0.2f), shape = RoundedCornerShape(14.dp),
                    modifier = Modifier.size(40.dp)) {}
            }
            Text("Wallet(USD)", Modifier.padding(top = 16.dp),
                color = Color.White.copy(alpha = 0.8f), style = MaterialTheme.typography.bodySmall)
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text(balance, color = Color.White, style = MaterialTheme.typography.headlineLarge,
                    fontWeight = FontWeight.ExtraBold)
                Spacer(Modifier.width(8.dp))
                Surface(color = Color.White.copy(alpha = 0.2f), shape = CircleShape) {
                    Text(change, Modifier.padding(horizontal = 8.dp, vertical = 2.dp),
                        color = Color.White, style = MaterialTheme.typography.labelSmall)
                }
            }
            Row(Modifier.padding(top = 12.dp), horizontalArrangement = Arrangement.spacedBy(10.dp),
                verticalAlignment = Alignment.CenterVertically) {
                Button(onClick = {}, shape = CircleShape,
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.White.copy(alpha = 0.15f))) {
                    Text("Add"); Spacer(Modifier.width(4.dp))
                    Icon(Icons.Filled.Add, null, Modifier.size(16.dp))
                }
                listOf(Icons.Filled.NorthEast, Icons.Filled.South, Icons.Outlined.AccountBalanceWallet)
                    .forEach { icon ->
                        Surface(color = Color.White.copy(alpha = 0.15f), shape = CircleShape,
                            modifier = Modifier.size(36.dp)) {
                            Box(contentAlignment = Alignment.Center) {
                                Icon(icon, null, tint = Color.White, modifier = Modifier.size(16.dp))
                            }
                        }
                    }
            }
        }
        Text("Latest transaction", Modifier.padding(16.dp),
            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        items.forEach { s ->
            OutlinedCard(Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 4.dp)) {
                ListItem(
                    leadingContent = {
                        Surface(color = s.tint, shape = RoundedCornerShape(10.dp),
                            modifier = Modifier.size(36.dp)) {}
                    },
                    headlineContent = { Text(s.name, fontWeight = FontWeight.Bold) },
                    supportingContent = { Text("${s.note}  ${s.date}") },
                    trailingContent = { Text(s.amount, fontWeight = FontWeight.Bold) },
                )
            }
        }
    }
}