File Storage

A cloud-storage home with a usage meter, horizontal folder cards and a recent-files list with type badges.

Your storage

489.56 GB/1 TBAvailable 510.44 GB

Your folders

Show all

Videos

192 files, 1.4GB

Photos

15 files, 1.1GB

Design

45 files

Recent files

Show all

ZIP

Project_ux

12 Oct, 2022 at 13:45 · 2.5MB

EPS

Icons_site

12 Oct, 2022 at 13:46 · 0.9MB

AVI

Meeting_design

12 Oct, 2022 at 13:48 · 1.7MB

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 StoredFile(val ext: String, val name: String, val meta: String, val tint: Color)

@Composable
fun StorageScreen(used: String, available: String, progress: Float, recent: List<StoredFile>) {
    Column(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)
        .padding(20.dp)) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Icon(Icons.Filled.Menu, "Menu")
            Icon(Icons.Filled.Search, "Search")
        }
        Text("Your storage", Modifier.padding(top = 12.dp),
            style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        Surface(
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
            color = Color(0xFFFBBF24),
        ) {
            Column(Modifier.padding(16.dp)) {
                Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                    Text(used, fontWeight = FontWeight.SemiBold, color = Color(0xFF1C1917))
                    Text("Available $available", fontWeight = FontWeight.SemiBold,
                        color = Color(0xFF1C1917))
                }
                LinearProgressIndicator(progress = { progress },
                    modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
                    color = Color(0xFF1C1917))
            }
        }
        Text("Recent files", Modifier.padding(top = 20.dp),
            style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
        recent.forEach { f ->
            OutlinedCard(Modifier.fillMaxWidth().padding(top = 8.dp)) {
                ListItem(
                    leadingContent = {
                        Surface(color = f.tint, shape = RoundedCornerShape(10.dp),
                            modifier = Modifier.size(36.dp)) {
                            Box(contentAlignment = Alignment.Center) {
                                Text(f.ext, color = Color.White,
                                    style = MaterialTheme.typography.labelSmall,
                                    fontWeight = FontWeight.Bold)
                            }
                        }
                    },
                    headlineContent = { Text(f.name) },
                    supportingContent = { Text(f.meta) },
                    trailingContent = { Icon(Icons.Filled.MoreVert, null) },
                )
            }
        }
    }
}