Command palette

A search field over a filtered, scrollable list of actions.

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 CommandPalette(actions: List<String>) {
    var query by remember { mutableStateOf("") }
    val results = remember(query) {
        actions.filter { it.contains(query, ignoreCase = true) }
    }
    Card(shape = RoundedCornerShape(16.dp)) {
        Column {
            Row(
                Modifier.padding(16.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Icon(Icons.Filled.Search, contentDescription = null)
                Spacer(Modifier.width(12.dp))
                BasicTextField(
                    value = query,
                    onValueChange = { query = it },
                    singleLine = true,
                    modifier = Modifier.weight(1f),
                    textStyle = LocalTextStyle.current.copy(
                        color = MaterialTheme.colorScheme.onSurface,
                    ),
                    decorationBox = { inner ->
                        if (query.isEmpty()) {
                            Text(
                                "Type a command",
                                color = MaterialTheme.colorScheme.onSurfaceVariant,
                            )
                        }
                        inner()
                    },
                )
            }
            HorizontalDivider()
            LazyColumn(Modifier.heightIn(max = 220.dp)) {
                items(results) { action ->
                    ListItem(
                        headlineContent = { Text(action) },
                        leadingContent = {
                            Icon(Icons.Outlined.Bolt, contentDescription = null)
                        },
                        modifier = Modifier.clickable { },
                    )
                }
            }
        }
    }
}