Getting Started

FreakUI uses a theme-based approach for consistent styling across your app. This guide will help you set up FreakUI in your project and configure your custom theme.

Installation Steps

1. Get Access

   Follow this link to get your copy of FreakUI.

2. Open FreakUI package in Xcode

   • Unzip the package
   • Open the folder with Xcode.
   • When Xcode asks if you want to open the package downloaded from the Internet, say yes.

3. Add Package dependency to your Xcode project

   • Open your existing Xcode project (or create a new one)
   • Click on File → Add Package Dependencies
   • Click on Add local
   • Select the folder with the package
   • Choose to import the package to your app's main target

4. Import Package

In any view where you want to use FreakUI, add this line on top:

myApp.swift

import FreakUI

If you want to configure your custom theme, add this line in your main app file too.

Theme Configuration

1. Create your custom theme

   • Create your custom theme struct
   • Conform it to FreakUITheme protocol
   • You will be prompted to add missing parameters for conformance

2. Declare theme configuration

Required Parameters	Optional Parameters
spacingScale	lightPrimaryGreen
radiusScale	darkPrimaryGreen
lightPrimaryAccent	lightPrimaryRed
darkPrimaryAccent	darkPrimaryRed
	lightPrimaryYellow
	darkPrimaryYellow

Example Themes

For example, this is minimal theme with only required Parameters (all the others are declared as nil):

MyCustomTheme.swift

struct MyMinimalTheme: FreakUITheme {
    // Define spacing and radius scales for your app
    var spacingScale: SpacingScale = .medium.     // Controls padding and margins
    var radiusScale: RadiusScale = .medium.       // Controls corner radiuses

    // Light mode colors
    var lightPrimaryAccent: String = "#8FBC8F"    // Main accent color
    var lightPrimaryGreen: String? = nil          // Positive states
    var lightPrimaryYellow: String? = nil         // Neutral states
    var lightPrimaryRed: String? = nil            // Negative states

    // Dark mode colors
    var darkPrimaryAccent: String = "#7FFF00"     // Main accent color
    var darkPrimaryGreen: String? = nil           // Positive states
    var darkPrimaryYellow: String? = nil          // Neutral states
    var darkPrimaryRed: String? = nil             // Negative states
}

And this is full theme with custom colors:

MyCustomTheme.swift

struct MyCompleteTheme: FreakUITheme {
    // Define spacing and radius scales for your app
    var spacingScale: SpacingScale = .medium      // Controls padding and margins
    var radiusScale: RadiusScale = .medium        // Controls corner radiuses

    // Light mode colors
    var lightPrimaryAccent: String = "#8FBC8F"    // Main accent color
    var lightPrimaryGreen: String? = "#32CD32"    // Positive states
    var lightPrimaryYellow: String? = "#DAA520"   // Neutral states
    var lightPrimaryRed: String? = "#8B0000"      // Negative states

    // Dark mode colors
    var darkPrimaryAccent: String = "#7FFF00"     // Main accent color
    var darkPrimaryGreen: String? = "#98FB98"     // Positive states
    var darkPrimaryYellow: String? = "#F0E68C"    // Neutral states
    var darkPrimaryRed: String? = "#B22222"       // Negative states
}

3. Configure theme in your main app initializer

myApp.swift

init() {
    ThemeManager.shared.configure(with: MyCompleteTheme())
}

Default Theme

Default Values

If you created your theme with only required parameters, .primaryGreen, .primaryYellow and .primaryRed colors will use default values from the FreakUI library.

Default Theme

If you do not create any custom theme, and only import FreakUI and use it's components, all the colors will use the default values from the FreakUI library, and spacingScale and radiusScale values will be treated as .medium.

Next Steps

Now that you've set up FreakUI and configured your theme, please go ahead and give it a try in your app's interface! While we're working on comprehensive documentation for all components, modifiers, and extensions, you can explore the library overview described in our release article to get started.