Crypto Account

A wallet account screen with a mesh-gradient balance card, asset filter tabs, a token row and send and receive actions.

9:41

$12,847.35

3 assets

AllPublicPrivate

$8,450.22

8,450 USDC

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 Asset(val name: String, val balance: String, val amount: String)

@Composable
fun CryptoAccountScreen(total: String, assetCount: Int, assets: List<Asset>) {
    val lime = Color(0xFFA3E635)
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background).padding(16.dp),
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically) {
            AssistChip(
                onClick = {},
                label = { Text("Account") },
                leadingIcon = {
                    Box(Modifier.size(10.dp).clip(CircleShape).background(lime))
                },
                trailingIcon = { Icon(Icons.Filled.ExpandMore, null) },
            )
            Row { Icon(Icons.Outlined.Description, null); Spacer(Modifier.width(10.dp))
                Icon(Icons.Outlined.Language, null) }
        }
        Box(
            Modifier.fillMaxWidth().height(170.dp).padding(top = 12.dp)
                .clip(RoundedCornerShape(24.dp))
                .background(Brush.linearGradient(
                    listOf(lime.copy(alpha = 0.5f), lime.copy(alpha = 0.15f)))),
            contentAlignment = Alignment.BottomStart,
        ) {
            Column(Modifier.padding(20.dp)) {
                Text(total, style = MaterialTheme.typography.headlineLarge,
                    fontWeight = FontWeight.ExtraBold)
                Text("$assetCount assets", color = MaterialTheme.colorScheme.onSurfaceVariant,
                    style = MaterialTheme.typography.labelSmall)
            }
        }
        var tab by remember { mutableStateOf(0) }
        TabRow(selectedTabIndex = tab, modifier = Modifier.padding(top = 16.dp)) {
            listOf("All", "Public", "Private").forEachIndexed { i, t ->
                Tab(selected = tab == i, onClick = { tab = i }, text = { Text(t) })
            }
        }
        assets.forEach { a ->
            ListItem(
                modifier = Modifier.padding(top = 12.dp),
                leadingContent = {
                    Surface(shape = CircleShape, color = Color(0xFF3B82F6),
                        modifier = Modifier.size(36.dp)) {
                        Box(contentAlignment = Alignment.Center) {
                            Icon(Icons.Filled.AttachMoney, null, tint = Color.White)
                        }
                    }
                },
                headlineContent = { Text(a.balance, fontWeight = FontWeight.Bold) },
                supportingContent = { Text(a.amount) },
            )
        }
        Spacer(Modifier.weight(1f))
        Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
            Button(onClick = {}, modifier = Modifier.weight(1f), shape = CircleShape,
                colors = ButtonDefaults.buttonColors(containerColor = lime,
                    contentColor = Color(0xFF1C1917))) {
                Icon(Icons.Filled.NorthEast, null, Modifier.size(16.dp))
                Spacer(Modifier.width(6.dp)); Text("Send")
            }
            Button(onClick = {}, modifier = Modifier.weight(1f), shape = CircleShape,
                colors = ButtonDefaults.buttonColors(containerColor = lime,
                    contentColor = Color(0xFF1C1917))) {
                Icon(Icons.Filled.SouthWest, null, Modifier.size(16.dp))
                Spacer(Modifier.width(6.dp)); Text("Receive")
            }
        }
    }
}