Navigationanimated

Wizard steps

A horizontal step tracker with connectors and checks for completed stages.

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 WizardSteps(current: Int, labels: List<String>) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        labels.forEachIndexed { i, label ->
            val done = i < current
            val active = i == current
            Box(
                Modifier.size(26.dp).clip(CircleShape)
                    .background(
                        when {
                            done -> Color(0xFF16A34A)
                            active -> MaterialTheme.colorScheme.primary
                            else -> MaterialTheme.colorScheme.surfaceVariant
                        },
                    ),
                contentAlignment = Alignment.Center,
            ) {
                if (done) Icon(Icons.Filled.Check, null, Modifier.size(15.dp),
                    tint = Color.White)
                else Text("${i + 1}", style = MaterialTheme.typography.labelMedium,
                    color = if (active) MaterialTheme.colorScheme.onPrimary
                        else MaterialTheme.colorScheme.onSurfaceVariant)
            }
            if (i < labels.lastIndex) {
                Box(Modifier.weight(1f).height(2.dp)
                    .background(if (done) Color(0xFF16A34A)
                        else MaterialTheme.colorScheme.surfaceVariant))
            }
        }
    }
}