OnboardKit

A clean toolkit for onboarding (iOS & macOS)

Overview

• OnboardKit is a comprehensive SwiftUI library designed to simplify the creation of onboarding experiences for iOS and macOS applications.
• Supply your own page models with title, description and buttons.
• Customize the sheet content with your own views. Sheets are prompted via button actions. Button actions can also trigger other actions you wish to add.

Features

• Dark / Light mode support
• Haptic feedback (iPhone only)
• Subdued translucent background (app as background)
• Prompt sheet via button actions (from bottom for iOS, from top for macOS)
• Add custom steps via sheet (Great for aditional onboarding customizations)
• BYO page model (easily create model via array of tuples)
• Multiplatform iOS and macOS (iPad / iPhone / Mac)
• Left / right chevron buttons are added for macOS (Expected UX)
• Panning support for macOS (navigate left / right)

Installation

To integrate OnboardKit into your Xcode project using Swift Package Manager, add the following as a dependency to your Package.swift:

.package(url: "https://github.com/sentryco/OnboardKit", branch: "main")

Usage

Here is a basic example of how to set up OnboardKit in your SwiftUI application:

import SwiftUI
import OnboardKit

@main
struct MyAppIOSApp: App {
   var body: some Scene {
      WindowGroup {
         ContentView()
      }
   }
}
struct ContentView: View {
   @State var needsOnboarding: Bool = true
   var body: some View {
      OnboardContainer(needsOnboarding: $needsOnboarding) { (_ needsOnboarding: Binding<Bool>) in
         OnboardView(
            pageModels: OnboardModel.dummyModels, // point to your own onboarding models here
            onComplete: {
               needsOnboarding.wrappedValue = false
            }
         )
      } background: {
         ZStack {
            Rectangle() // this is where the app main view goes
               .fill(Color.init(light: Color.lightGray.lighter(amount: 0.8), dark: Color.darkGray.darker(amount: 0.8))) // light or dark mode
            Text("Your app goes here")
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .edgesIgnoringSafeArea(.all)
      }
   }
}

Dependencies

OnboardKit utilizes several dependencies to enhance its functionality.

• Light and dark mode: HybridColor
• Page control for iOS: PageControl
• Page controller for macOS: PageControllerView
• Haptic feedback: HapticFeedback
• Blur view support: BlurView

Resources:

• https://sarunw.com/posts/how-to-create-neomorphism-design-in-swiftui/
• https://github.com/ciaranrobrien/SwiftUIPageView
• https://sarunw.com/posts/uikit-in-swiftui/
• https://github.com/exyte/ConcentricOnboarding
• fancy custom advance onboarding: https://betterprogramming.pub/scroll-programatically-with-swiftui-scrollview-f080fd58f843
• https://github.com/fredyshox/PageView
• https://stackoverflow.com/questions/58388071/how-can-i-implement-pageview-in-swiftui
• Good tutorial for onboarding: https://medium.com/@sharma17krups/onboarding-view-with-swiftui-b26096049be3
• https://github.com/Krupanshu-Sharma/OnBoardingViewSwiftUI
• macos: https://github.com/ishaanbedi/Voyager/tree/main/Swift%20Post/Views/OnboardingViews

Contributing

Contributions are welcome! Please fork the repository and submit pull requests with any new features or fixes.

License

OnboardKit is released under the MIT License. See LICENSE for details.

TODO:

• Fix bug crashing preview ✅
• Clean up code
• Add gif for iOS ✅
• Add gif for macOS
• Add modal sheet example
• Enabele isTest in the scope of this package
• Add high level doc regarding the simplistic approch with models that can have btns, title, decription, and popover sheet, and how this ultimatly makes making multipleplatform onbiarding a breeze, yet makes it possible to build powerful and complex onboarding experiences, while leaving the nitty gritty to this kit
• Add note regarding implemnting a lockable view with onboardview. How the structure will look etc, and link to the repo etc?
• better handling of platform-specific features or UI components.