Cards
Cardsanimated

Boarding Pass

Boarding pass with perforated notch and tear-away stub micro-interaction.

Flight UA 884

Seat 14A · 09:20

A14

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 BoardingPassCard() {
  var torn by remember { mutableStateOf(false) }
  val shift by animateDpAsState(
    if (torn) 24.dp else 0.dp, label = "tear"
  )
  Surface(
    shape = RoundedCornerShape(16.dp),
    tonalElevation = 2.dp,
    modifier = Modifier.fillMaxWidth().padding(16.dp)
      .clickable { torn = !torn }
  ) {
    Row(Modifier.height(IntrinsicSize.Min)) {
      Column(Modifier.weight(1f).padding(18.dp)) {
        Text("Flight UA 884")
        Text(
          "Seat 14A · Boarding 09:20",
          style = MaterialTheme.typography.bodySmall
        )
      }
      Canvas(Modifier.fillMaxHeight().width(2.dp)) {
        var y = 0f
        while (y < size.height) {
          drawCircle(
            Color.Gray, 2f, Offset(0f, y)
          )
          y += 10f
        }
      }
      Box(
        Modifier.offset(x = shift).padding(18.dp)
      ) { Text("A14", style = MaterialTheme.typography.titleMedium) }
    }
  }
}