ErabiKit (選び) is a beautiful, customizable SwiftUI settings screen library for iOS. The name comes from the Japanese word for "choice" or "selection."
- Native SwiftUI components
- Customizable gradient overlays
- No dependencies
- iOS 15.0+
- Dark mode support
- Works on iPad and landscape
- Built with accessibility in mind
Love this project? Check out my books to explore more of AI and iOS development:
Your support helps to keep this project growing!
- iOS 15.0+
- Swift 5.5+
- Xcode 13.0+
Add ErabiKit to your project using Swift Package Manager:
dependencies: [
.package(url: "https://github.com/rryam/ErabiKit.git", from: "1.0.0")
]Then import it in your SwiftUI views:
import ErabiKitHere's a simple example to get you started:
import SwiftUI
import ErabiKit
struct SettingsView: View {
@State private var notificationsEnabled = true
var body: some View {
NavigationView {
List {
SettingsNavigationRow(
imageName: "person.circle",
title: "Profile",
destination: ProfileView()
)
SettingsToggleRow(
imageName: "bell",
title: "Notifications",
value: $notificationsEnabled
)
AppVersionRow(version: "1.0.0")
AboutRow(
title: "Made with love by Your Name",
accessibilityTitle: "Made with love by Your Name"
)
}
.navigationTitle("Settings")
}
}
}A settings row with navigation capability that pushes to a destination view.
SettingsNavigationRow(
imageName: "gear",
title: "General",
addOverlay: true,
destination: GeneralSettingsView()
)Parameters:
imageName: SF Symbol name for the icontitle: Text to displayaddOverlay: Enable/disable gradient border (default:true)destination: SwiftUI view to navigate to
A settings row that performs a custom action when tapped.
SettingsActionRow(
imageName: "trash",
title: "Clear Cache",
addOverlay: true
) {
clearCache()
}Parameters:
imageName: SF Symbol name for the icontitle: Text to displayaddOverlay: Enable/disable gradient border (default:true)action: Closure to execute on tap
A basic settings row component used as a building block for other rows.
SettingsRow(
imageName: "star",
title: "Favorites",
addOverlay: true,
showDisclosure: true
)Parameters:
imageName: SF Symbol name for the icontitle: Text to displayaddOverlay: Enable/disable gradient border (default:true)showDisclosure: Show/hide chevron icon (default:true)
A settings row with a toggle switch for boolean values.
@State private var darkModeEnabled = false
SettingsToggleRow(
imageName: "moon",
title: "Dark Mode",
value: $darkModeEnabled,
addOverlay: true
)Parameters:
imageName: SF Symbol name for the icontitle: Text to displayvalue: Binding to a Boolean valueaddOverlay: Enable/disable gradient border (default:true)
Displays the current app version with a clean, informative design.
AppVersionRow(
imageName: "info.circle",
title: "App version",
version: "1.2.3",
addOverlay: true
)Parameters:
imageName: SF Symbol name for the icon (default:"info.circle")title: Text to display (default:"App version")version: Version string to displayaddOverlay: Enable/disable gradient border (default:true)
A convenient row for directing users to write an App Store review.
WriteReviewRow(
imageName: "pencil.and.outline",
title: "Write a review",
appURL: "https://apps.apple.com/app/id123456789",
addOverlay: true
)Parameters:
imageName: SF Symbol name for the icon (default:"pencil.and.outline")title: Text to display (default:"Write a review")appURL: App Store URL for your appaddOverlay: Enable/disable gradient border (default:true)
Opens Twitter (X) app or web URL for social media engagement.
TwitterRow(
imageName: "textbox",
title: "Follow us on Twitter",
twitterAppURL: "twitter://user?screen_name=yourusername",
twitterWebURL: "https://twitter.com/yourusername",
addOverlay: true
)Parameters:
imageName: SF Symbol name for the icon (default:"textbox")title: Text to displaytwitterAppURL: Deep link to open in Twitter apptwitterWebURL: Fallback web URLaddOverlay: Enable/disable gradient border (default:true)
Displays a mail composer for user feedback or support emails. Automatically handles multiple mail clients (Mail, Gmail, Outlook, Yahoo, Spark).
let mailObject = MailRowObject(
receiver: "[email protected]",
subject: "Feedback",
body: "I love this app!"
)
MailRow(
image: "envelope",
title: "Send Feedback",
addOverlay: true,
object: mailObject
)Parameters:
image: SF Symbol name for the icontitle: Text to displayaddOverlay: Enable/disable gradient border (default:true)object:MailRowObjectcontaining email details
A centered text row for displaying attribution or app information.
AboutRow(
title: "Made with love by Rudrank Riyam",
accessibilityTitle: "Made with love by Rudrank Riyam"
)Parameters:
title: Text to display (shown in uppercase with kerning)accessibilityTitle: Accessibility label for VoiceOver
ErabiKit includes custom view modifiers you can use on any SwiftUI view:
Applies consistent styling to SF Symbol icons.
Image(systemName: "star")
.customIconImage()Applies the signature ErabiKit background with gradient border.
Text("Custom Row")
.settingsBackground(
cornerRadius: 16,
innerPadding: 8,
outerBottomPadding: 6,
addOverlay: true
)Parameters:
cornerRadius: Corner radius for the overlay (default:16)innerPadding: Vertical padding inside the row (default:8)outerBottomPadding: Bottom padding outside the row (default:6)addOverlay: Show/hide gradient border (default:true)
All components use SwiftUI's accent color for theming. Set your app's accent color to automatically customize ErabiKit:
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.accentColor(.purple)
}
}
}Or use the tint() modifier:
SettingsNavigationRow(...)
.tint(.blue)Based on the popular Gradient Game settings screen design.
Contributions are welcome! Here's how you can help:
- Fork the repository and create a feature branch
- Make your changes following the existing code style
- Test thoroughly on iOS 15.0+
- Update documentation as needed
- Submit a pull request with a clear description
ErabiKit is available under the MIT license. See the LICENSE file for more info.
Created by Rudrank Riyam
- X/Twitter: @rudrank
- GitHub: @rudrankriyam