Radix-UI is an open source library optimized for fast development, easy maintenance, and accessibility.
Since Radix-UI developers said it is not available to Mobile Development (like SwiftUI) and never be (reference), I decided to make it ready for myself to use it because I just like it so much. My inspiration for doing it is Basics website and the minimal and gorgeous design of Radix-UI.
Add this project on your Package.swift
import PackageDescription
let package = Package(
dependencies: [
.package(url: "https://github.com/amirsaam/RadixUI-Swift.git", from: "0.8.00"),
]
)Surely import the package
import RadixUIUse colors as any other colors
Text("RadixUI-Swift")
.foregroundColor(.crimson1)In order to use your own custom color pallete head to Radix Pallete Generator and create your pallete and then use color hexes to have your own pallete with the following code:
public extension Color {
static let colorExampleSolid = Color(lightHex: "lightSixDigitHex", darkHex: "darkSixDigitHex")
static let colorExampleAlpha = Color(lightHex: "lightEightDigitHex", darkHex: "darkEightDigitHex")
}Use icons in Image with bundle name completely customisable
Image("github-logo", bundle: .radixUI)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: anySize, height: anySize)
.foregroundColor(.ruby9)Or, make some custom extension to use Label
struct ResizeableBundledImage: View {
let imageName: String
let imageSize: CGFloat
let bundle: Bundle
var body: some View {
Image(imageName, bundle: bundle)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: imageSize, height: imageSize)
}
}
extension Label where Title == Text, Icon == ResizeableBundledImage {
init(_ title: LocalizedStringKey, imageName: String, imageSize: CGFloat, bundle: Bundle) {
let titleView: () -> Text = { Text(title) }
let iconView: () -> ResizeableBundledImage = { ResizeableBundledImage(imageName: imageName, imageSize: imageSize, bundle: bundle) }
self.init(title: titleView, icon: iconView)
}
}Apply RadixSwitch style to SwiftUI Toggles:
Toggle(isOn: $toggleBinding) {
AnyLabel
}
.radixSwitch(onColor: .ruby9, offColor: .gray7, thumbColor: .ruby9)
// Or simply for Black and White
.radixSwitch()For changing Segmented Picker of SwiftUI to match Radix style create an init in @main struct of the app or just apply such init in any view you want:
@main
struct RadixApp: App {
init() {
RadixSegmentedPicker(
backgroundColor: .ruby3,
selectedColor: .ruby12,
foregroundColor: .ruby4
)
}
var body: some Scene {
WindowGroup {
ContentView()
}
}
}Radix Shadows are available as ViewModifier in 6 level:
AnyView
.radixShadow1()
.radixShadow2()
.radixShadow3()
.radixShadow4()
.radixShadow5()
.radixShadow6()Any PRs are welcomed:
- Add Radix Colors
- Add Radix Icons
- Add Radix Primitives (WIP)
- Add Radix Themes (WIP)
- Make a macOS ready version
- Write Xcode Tests
- Make Pod
- Deploy Github Action
- RadixUI-Swift has no dependency
Amir Mohammadi – @amirsaam – amirsaam [at] me [dot] com
Distributed under the MIT license. See LICENSE for more information.