RadixUI-Swift

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.

Installation

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"),
    ]
)

Usage example

Surely import the package

import RadixUI

Use 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()

To Do

Any PRs are welcomed:

Dependencies

RadixUI-Swift has no dependency

Credits

@WorkOS for Radix-UI