Library facilitates guided onboarding by highlighting UI elements, offering customizable animations, scrim color, and support for multiple pages with optional Material 3 BottomSheet integration.
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.
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.
Surfaced from shared tags and platforms — no rankings paid for.