Blocks

Wallet Home

A banking home with greeting, balance, deposit and transfer, a swipeable card carousel, weekly budget and transactions.

9:41
A

Hi, Andrew

Welcome back!

Your Balance

$23,550.0

Cards

VISA

$12550.0

Debit8764

$11000.0

Credit2501

Week budget

05/05-11/05

$160.8

$200.0

Transactions

F

FlowerShop

15:44

-$87.0
U

Uber Ride

10:15

-$25.5
A

Amazon - Electronics

09:30

-$89.9
C

Cashback

09:12

+$8.0

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 Txn(val name: String, val time: String, val amount: String, val incoming: Boolean)

@Composable
fun WalletHomeScreen(balance: String, transactions: List<Txn>) {
    val violet = Color(0xFF7C3AED)
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)
            .verticalScroll(rememberScrollState()).padding(16.dp),
    ) {
        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            Surface(shape = CircleShape, color = MaterialTheme.colorScheme.onBackground,
                modifier = Modifier.size(36.dp)) {
                Box(contentAlignment = Alignment.Center) {
                    Text("A", color = MaterialTheme.colorScheme.background,
                        fontWeight = FontWeight.Bold)
                }
            }
            Spacer(Modifier.width(10.dp))
            Column(Modifier.weight(1f)) {
                Text("Hi, Andrew", fontWeight = FontWeight.Bold)
                Text("Welcome back!", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant)
            }
            Icon(Icons.Filled.BarChart, null)
        }
        Text("Your Balance", Modifier.padding(top = 16.dp),
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            style = MaterialTheme.typography.bodyMedium)
        Text(balance, style = MaterialTheme.typography.headlineMedium,
            fontWeight = FontWeight.ExtraBold)
        Row(Modifier.padding(top = 8.dp), horizontalArrangement = Arrangement.spacedBy(10.dp)) {
            Button(onClick = {}, modifier = Modifier.weight(1f), shape = RoundedCornerShape(12.dp),
                colors = ButtonDefaults.buttonColors(
                    containerColor = MaterialTheme.colorScheme.onBackground,
                    contentColor = MaterialTheme.colorScheme.background)) {
                Icon(Icons.Filled.Add, null, Modifier.size(16.dp)); Spacer(Modifier.width(6.dp))
                Text("Deposit")
            }
            OutlinedButton(onClick = {}, modifier = Modifier.weight(1f),
                shape = RoundedCornerShape(12.dp)) {
                Icon(Icons.Filled.NorthEast, null, Modifier.size(16.dp))
                Spacer(Modifier.width(6.dp)); Text("Transfer")
            }
        }
        Text("Transactions", Modifier.padding(top = 16.dp),
            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        transactions.forEach { t ->
            ListItem(
                leadingContent = { Surface(shape = CircleShape, color = violet.copy(alpha = 0.15f),
                    modifier = Modifier.size(36.dp)) {} },
                headlineContent = { Text(t.name) },
                supportingContent = { Text(t.time) },
                trailingContent = { Text(t.amount, fontWeight = FontWeight.Bold,
                    color = if (t.incoming) Color(0xFF10B981)
                        else MaterialTheme.colorScheme.onSurface) },
            )
        }
    }
}