Spotlight Onboarding is a library for Compose Multiplatform that helps you create guided onboarding experiences by highlighting key UI elements. It allows users to focus on specific parts of your interface while dimming the rest of the screen.

• Highlight specific UI elements.
• Smooth enter/exit animations.
• Customizable scrim color and shape.
• Optional Material 3 BottomSheet support.
• Support for multiple pages in onboarding flow.

Add the dependency to your build.gradle.kts:

implementation("io.github.s4nchouz:spotlight-onboarding:1.1.1")

For the Material 3 BottomSheet version:

implementation("io.github.s4nchouz:spotlight-onboarding-bottomsheet:1.1.1")

@Composable
fun MyScreen() {
    val spotlightState = rememberSpotlightOnboardingState()

    SpotlightOnboarding(
        isVisible = true,
        spotlightState = spotlightState
    ) {
        // Your content here
    }
}

Use spotlightItem modifier to mark elements to be highlighted:

Text(
    text = "Highlighted Item",
    modifier = Modifier.spotlightItem()
)

SpotlightOnboarding(
    isVisible = true,
    spotlightState = spotlightState,
    onDismissRequest = { /* Handle dismiss */ },
    sheetContent = {
        Text("Additional Information")
    }
) {
    // Your content here
}

• scrimColor: Customize the background overlay color.
• spotlightEnterTransition: Define how the spotlight appears.
• spotlightExitTransition: Define how the spotlight disappears.

Copyright 2025 Aleksandr Anokhin

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.