Calculator

A bold calculator with a coral display panel, a dark rounded keypad and an accent equals key.

1852.6

1000.324

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 CalculatorScreen() {
    var display by remember { mutableStateOf("1000.324") }
    val coral = Color(0xFFE8531F)
    val keys = listOf(
        "7", "8", "9", "/",
        "4", "5", "6", "*",
        "1", "2", "3", "-",
        ".", "0", "=", "+",
    )
    Column(Modifier.fillMaxSize().background(Color(0xFF1A1A1A))) {
        Box(
            Modifier.fillMaxWidth().weight(1f).background(coral).padding(24.dp),
            contentAlignment = Alignment.BottomEnd,
        ) {
            Text(display, color = Color.White, style = MaterialTheme.typography.displaySmall,
                fontWeight = FontWeight.Light)
        }
        LazyVerticalGrid(
            columns = GridCells.Fixed(4),
            modifier = Modifier.padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            items(keys) { k ->
                val isOp = k in listOf("/", "*", "-", "+", "=")
                Surface(
                    onClick = {},
                    shape = CircleShape,
                    color = when {
                        k == "=" -> coral
                        isOp -> Color(0xFF44403C)
                        else -> Color(0xFF292524)
                    },
                    modifier = Modifier.aspectRatio(1f),
                ) {
                    Box(contentAlignment = Alignment.Center) {
                        Text(k, color = if (isOp && k != "=") Color(0xFFFDBA74) else Color.White,
                            style = MaterialTheme.typography.titleLarge)
                    }
                }
            }
        }
    }
}