Grouped results

A palette that splits results into labelled groups with trailing shortcuts.

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 GroupedPalette() {
    Card(shape = RoundedCornerShape(16.dp)) {
        Column(Modifier.padding(vertical = 8.dp)) {
            Text("Actions", Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
            CommandRow(Icons.Filled.Add, "New document", "⌘N")
            CommandRow(Icons.Filled.Upload, "Import", "⌘I")
            Text("Navigation", Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
            CommandRow(Icons.Filled.Settings, "Settings", "⌘,")
        }
    }
}

@Composable
private fun CommandRow(icon: ImageVector, label: String, shortcut: String) {
    ListItem(
        leadingContent = { Icon(icon, null) },
        headlineContent = { Text(label) },
        trailingContent = {
            Text(shortcut, style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
        },
        modifier = Modifier.clickable {},
    )
}