ComposeCoach

Lightweight toolkit for in-app coach marks and guided tours — customizable target shapes, reveal animations, button layouts, and simple addTarget/host API for easy onboarding flows.

Suggest an edit
Android JVMJVMKotlin/NativeWasmJS
GitHub stars6
Open issues5
LicenseMIT License
Creation dateover 2 years ago
Last activity3 months ago
Latest release1.0.1 (4 months ago)
GitHub repositoryWiki page

Maven Central License Kotlin Multiplatform Compose Multiplatform

ComposeCoach

ComposeCoach — A lightweight Kotlin Multiplatform (KMP) library for Coach Marks

Overview

ComposeCoach is a highly customizable KMP library built with Jetpack Compose Multiplatform that allows developers to easily add coach marks and guided user tours across Android, iOS, Desktop, and Web.

Coachmarks help highlight UI components and guide users during onboarding or feature discovery.

✨ Features

✔ Kotlin Multiplatform Support

Runs seamlessly on:

  • Android
  • iOS
  • Desktop (JVM)
  • Web (Compose HTML)

✔ Jetpack Compose / Compose Multiplatform Integration

Built entirely with modern declarative UI APIs.

✔ Fully Customizable

Implement your own:

  • Coach styles
  • Button layouts
  • Reveal animations
  • Target shapes

✔ Simple to Use

Just wrap your content and mark UI elements using addTarget.

🚀 Getting Started

Add the dependency:

Android Project 
dependencies {
    implementation "com.ruviapps.coachmark:compose-coach-android:<latest-version>"
}
Kotlin Multiplatform Project 
kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("com.ruviapps.coachmark:compose-coach:<latest_version>")
            }
        }
    }
}

📌 Usage Example

1. State variable

var showCoachMark by remember { mutableStateOf(true) }

2. Create a CoachMarkState

val coachMarkState = rememberCoachMarkState()

3. Wrap content using CoachMarkHost

CoachMarkHost(
    showCoach = showCoachMark,
    state = coachMarkState,
    actions = object : DefaultCoachMarkActions() {
        override fun onComplete() { showCoachMark = false }
        override fun onSkip() { showCoachMark = false }
    }
) {
    // Your app UI…
}

4. Add targets using addTarget 

Text(
    "Compose Coach",
    modifier = Modifier.addTarget(
        position = 2,
        revealEffect = CircleRevealEffect(),
        content = {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    "A Highly Customizable Coach Mark Library!!",
                    color = Color.White,
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        },
        backgroundCoachStyle = NoCoachMarkButtons
    )
)

📄 License

ComposeCoach is licensed under the MIT License.

🤝 Contribution

Contributions are welcome!
Feel free to open issues or submit PRs.

Happy coding!

Android JVMJVMKotlin/NativeWasmJS
GitHub stars6
Open issues5
LicenseMIT License
Creation dateover 2 years ago
Last activity3 months ago
Latest release1.0.1 (4 months ago)
GitHub repositoryWiki page

Maven Central License Kotlin Multiplatform Compose Multiplatform

ComposeCoach

ComposeCoach — A lightweight Kotlin Multiplatform (KMP) library for Coach Marks

Overview

ComposeCoach is a highly customizable KMP library built with Jetpack Compose Multiplatform that allows developers to easily add coach marks and guided user tours across Android, iOS, Desktop, and Web.

Coachmarks help highlight UI components and guide users during onboarding or feature discovery.

✨ Features

✔ Kotlin Multiplatform Support

Runs seamlessly on:

  • Android
  • iOS
  • Desktop (JVM)
  • Web (Compose HTML)

✔ Jetpack Compose / Compose Multiplatform Integration

Built entirely with modern declarative UI APIs.

✔ Fully Customizable

Implement your own:

  • Coach styles
  • Button layouts
  • Reveal animations
  • Target shapes

✔ Simple to Use

Just wrap your content and mark UI elements using addTarget.

🚀 Getting Started

Add the dependency:

Android Project 
dependencies {
    implementation "com.ruviapps.coachmark:compose-coach-android:<latest-version>"
}
Kotlin Multiplatform Project 
kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("com.ruviapps.coachmark:compose-coach:<latest_version>")
            }
        }
    }
}

📌 Usage Example

1. State variable

var showCoachMark by remember { mutableStateOf(true) }

2. Create a CoachMarkState

val coachMarkState = rememberCoachMarkState()

3. Wrap content using CoachMarkHost

CoachMarkHost(
    showCoach = showCoachMark,
    state = coachMarkState,
    actions = object : DefaultCoachMarkActions() {
        override fun onComplete() { showCoachMark = false }
        override fun onSkip() { showCoachMark = false }
    }
) {
    // Your app UI…
}

4. Add targets using addTarget 

Text(
    "Compose Coach",
    modifier = Modifier.addTarget(
        position = 2,
        revealEffect = CircleRevealEffect(),
        content = {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    "A Highly Customizable Coach Mark Library!!",
                    color = Color.White,
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        },
        backgroundCoachStyle = NoCoachMarkButtons
    )
)

📄 License

ComposeCoach is licensed under the MIT License.

🤝 Contribution

Contributions are welcome!
Feel free to open issues or submit PRs.

Happy coding!