Develop iOS apps faster
with custom UI components
Beautiful UI elements for SwiftUI and UIKit.

Don't waste time
styling basic elements
ComponentsKit offers beautifully designed, animatable components that are ready to use immediately.

+ many other components
Write code with your
preferred framework
ComponentsKit is fully compatible with both UIKit and SwiftUI.
final class PageViewController: UIViewController {
private let emailInputVM = InputFieldVM {
$0.title = "Email"
$0.isRequired = true
}
private let checkboxVM = CheckboxVM {
$0.title = "I agree to receive marketing emails"
}
private let buttonVM = ButtonVM {
$0.title = "Continue"
$0.isFullWidth = true
}
private lazy var emailInput = UKInputField(
model: self.emailInputVM
)
private lazy var consentCheckbox = UKCheckbox(
model: self.checkboxVM
)
private lazy var continueButton = UKButton(
model: self.buttonVM
)
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(self.emailInput)
self.view.addSubview(self.continueButton)
self.view.addSubview(self.continueButton)
self.layout()
}
private func layout() { ... }
}

Easily customize
your app's appearance
The library offers a wide range of configuration options for components and app themes.

// Setup apperance of the components
let model = ButtonVM {
$0.title = "Order now"
$0.color = .accent
$0.font = .system(size: 22, weight: .semibold)
$0.cornerRadius = .full
}
// Control global style
ComponentsKitConfig.shared.colors.update {
// Base colors
$0.background = .themed(
light: .hex("#F1F7FA"),
dark: .hex("#003955")
)
// Component colors
$0.accent = .init(
main: .themed(
light: .hex("#3684F8"),
dark: .hex("#0058DB")
),
contrast: .universal(.hex("#FFFFFF"))
)
}
How to install
Start using the library now, it is free.
Add ComponentsKit to an Xcode project as a package dependency:
- From the File menu, select Add Package Dependencies....
- Enter
https://github.com/componentskit/ComponentsKit
into the package repository URL text field. - Add componentskit to your application.
Have questions? Contact us at support@componentskit.io