Cards
Cardsanimated

Cart Preview

Mini cart popover card with item thumbnails and animated count badge.

3
Your Cart
Item 1$24
Item 2$24

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 CartPreviewCard() {
  var count by remember { mutableStateOf(3) }
  Card(
    modifier = Modifier.width(260.dp),
    shape = RoundedCornerShape(18.dp)
  ) {
    Column(Modifier.padding(16.dp)) {
      Row(verticalAlignment = Alignment.CenterVertically) {
        Box {
          Icon(Icons.Default.ShoppingCart, null)
          Badge(Modifier.align(Alignment.TopEnd)) { Text("$count") }
        }
        Spacer(Modifier.width(8.dp))
        Text("Your Cart",
          style = MaterialTheme.typography.titleMedium)
      }
      Spacer(Modifier.height(12.dp))
      repeat(2) {
        Row(Modifier.padding(vertical = 4.dp),
          verticalAlignment = Alignment.CenterVertically) {
          Box(
            Modifier.size(40.dp).clip(RoundedCornerShape(8.dp))
              .background(MaterialTheme.colorScheme.surfaceVariant)
          )
          Spacer(Modifier.width(10.dp))
          Text("Item ${'$'}{it + 1}", Modifier.weight(1f))
          Text("$24")
        }
      }
    }
  }
}