Cardsanimated

Product Carousel Dots

Product card with a swipeable image carousel and animated page dots.

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 CarouselDotsCard() {
  val pager = rememberPagerState { 4 }
  Card(
    modifier = Modifier.width(240.dp),
    shape = RoundedCornerShape(18.dp)
  ) {
    Column {
      HorizontalPager(pager, Modifier.height(140.dp)) {
        Box(
          Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.surfaceVariant)
        )
      }
      Row(
        Modifier.fillMaxWidth().padding(12.dp),
        horizontalArrangement = Arrangement.Center
      ) {
        repeat(4) { i ->
          val w by animateDpAsState(
            if (i == pager.currentPage) 18.dp else 6.dp, label = "w")
          Box(
            Modifier
              .padding(3.dp)
              .height(6.dp)
              .width(w)
              .clip(CircleShape)
              .background(
                if (i == pager.currentPage)
                  MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.outline
              )
          )
        }
      }
    }
  }
}