Search History

A search screen with recent queries grouped by day, chevron rows and a violet center compose button.

9:41

Search...

Today

A Mouse Playing Guitar

Fix React Form Validation

Yesterday

Build contact from in HTML, CSS, JS

Cartoon Cat in a Spacesuit

Generate Intro Video for My App

Clone My Voice for Audiobook

Explain Quantum Physics Simply

Fix My Python Loop Bug

Write a Birthday Poem for Dad

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

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchHistoryScreen(today: List<String>, yesterday: List<String>) {
    var query by remember { mutableStateOf("") }
    val violet = Color(0xFF7C3AED)
    Scaffold(
        bottomBar = {
            Box(contentAlignment = Alignment.TopCenter) {
                NavigationBar {
                    NavigationBarItem(false, {}, { Icon(Icons.Filled.Home, null) })
                    NavigationBarItem(false, {}, { Icon(Icons.Outlined.ChatBubbleOutline, null) })
                    NavigationBarItem(false, {}, { Spacer(Modifier.size(48.dp)) }, enabled = false)
                    NavigationBarItem(false, {}, { Icon(Icons.Outlined.Circle, null) })
                    NavigationBarItem(false, {}, { Icon(Icons.Filled.Settings, null) })
                }
                FloatingActionButton(onClick = {}, containerColor = violet,
                    modifier = Modifier.offset(y = (-24).dp), shape = CircleShape) {
                    Icon(Icons.Filled.Add, "New", tint = Color.White)
                }
            }
        },
    ) { padding ->
        Column(Modifier.fillMaxSize().padding(padding).padding(16.dp)) {
            OutlinedTextField(
                value = query, onValueChange = { query = it },
                leadingIcon = { Icon(Icons.Filled.Search, null) },
                placeholder = { Text("Search...") },
                shape = RoundedCornerShape(14.dp),
                modifier = Modifier.fillMaxWidth(),
            )
            Text("Today", Modifier.padding(top = 16.dp, bottom = 4.dp),
                style = MaterialTheme.typography.labelMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
            today.forEach { Row(Modifier.fillMaxWidth().padding(vertical = 10.dp),
                horizontalArrangement = Arrangement.SpaceBetween) {
                Text(it); Icon(Icons.Filled.ChevronRight, null) } }
            Text("Yesterday", Modifier.padding(top = 12.dp, bottom = 4.dp),
                style = MaterialTheme.typography.labelMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
            yesterday.forEach { Row(Modifier.fillMaxWidth().padding(vertical = 10.dp),
                horizontalArrangement = Arrangement.SpaceBetween) {
                Text(it); Icon(Icons.Filled.ChevronRight, null) } }
        }
    }
}