<img src="Banner.png">

SSNeumorphicView

SSNeumorphicView is a sophisticated and flexible library for iOS that seamlessly integrates the trendy Neumorphic design style into your app’s user interface. Neumorphism, known for its soft, subtle shadowing combined with depth and texture, creates an elegant, soft-embossed effect that makes your UI components look tactile and engaging. 🌟✨

SSNeumorphicView simplifies the process of incorporating Neumorphic elements into your app, providing both UIKit and SwiftUI compatibility. With extensive customization options for shadow colors, depths, and styles, you can craft a modern and visually appealing user experience effortlessly. 🎨🖌️💡 Plus, it's backward compatible with iOS 13, ensuring broad support across various devices. 📱🔄

[![Swift Version][swift-image]][swift-url] [![License][license-image]][license-url] [![SwiftPM Compatible][spm-image]][spm-url] [![Platform][platform-image]][platform-url] [![PRs Welcome][PR-image]][PR-url]

<img src="https://github.com/SimformSolutionsPvtLtd/SSNeumorphicKit/blob/feature/ssneumophickit/Screenshots/image.jpg">

Features! :sparkles:

• 🎨 Seamless Neumorphic Integration: Easily apply Neumorphic designs to views, buttons, text fields, and toggle views with just a few lines of code.

• 🌗 Dynamic Adaptation for Light and Dark Modes: Automatically adapts to both light and dark modes, ensuring your app looks great regardless of the user’s device settings.

• 🖌️ Customizable Shadows: Support for both inner and outer shadows, allowing you to create depth and emboss effects that suit your design needs.

• 🧩 Compatibility with UIKit and SwiftUI: Leverage the power of Neumorphic design across both UIKit and SwiftUI, providing flexibility in how you build your iOS app.

• 🛠️ Easy Customization: Customize shadow colors, depths, corner radius, and more to match your app’s design language.

• 🧱 Out-of-the-Box Components: Prebuilt Neumorphic components such as buttons and toggle views, with customizable styles like NMButtonStyle and NMToggleStyle, allowing you to further tailor their appearance and behavior.

• 📚 Detailed Documentation and Examples: Comprehensive guides and examples to help you get started quickly and efficiently.

• 🔄 Responsive Design: Ensures your Neumorphic elements look great on various screen sizes and orientations.

Example :iphone:

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements :clipboard:

• iOS 13.0+
• Xcode 11+

Installation :package:

CocoaPods

[CocoaPods][CocoaPods.org] is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

Navigate to project root folder to integrate pod.

$ pod init

It will generate Podfile for your project. To integrate SSNeumorphicView into your project specify it in your Podfile:

platform :ios, '13.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'SSNeumorphicView'
end

Then, run the following command:

$ pod install

It will generate <Project>.xcworkspace file. From now on you should open the project using this file.

Swift Package Manager

You can install SSNeumorphicView using [Swift Package Manager] by:

1. Go to Xcode -> File -> Add Package Dependencies...
2. Add package URL [https://cocoapods.org/pods/SSNeumorphicView][SSNeumorphicView]

dependencies: [
    .package(url: "https://github.com/SimformSolutionsPvtLtd/SSNeumorphicKit.git", from: "1.0.0")
]

Manually

• Add SSNeumorphicView folder from /Sources folder to your project.

Usage example :bulb:

How to use with UIKit and Storyboard: :framed_picture:

In the storyboard add a UIView and change its class to SSNeumorphicView

<img src="https://github.com/SimformSolutionsPvtLtd/SSNeumorphicKit/blob/feature/ssneumophickit/Screenshots/Screenshot%202020-07-07%20at%207.22.23%20PM.png">

NOTE:

• For UIButton add SSNeumorphicButton as its class.
• For UITextField add SSBaseTextField as its class.

Import Neumorphic package to your view.

import SSNeumorphicView

Create NeumorphicView with the outer shadow.

| <center> Light Mode </center> | <center> Dark Mode </center> | |----------|----------| | <img src="Screenshots/UI-Kit-Demo-SS/shape-light.png" > | <img src="Screenshots/UI-Kit-Demo-SS/shape-dark.png" > |

@IBOutlet weak var viewNeumorphic: SSNeumorphicView! {
    didSet {
        viewNeumorphic.viewDepthType = .outerShadow
    }
}
    

Create neumorphic text field with the Inner shadow.

| <center> Light Mode </center> | <center> Dark Mode </center> | |----------|----------| | <img src="Screenshots/UI-Kit-Demo-SS/text-field-light.png" > | <img src="Screenshots/UI-Kit-Demo-SS/text-field-dark.png" > |

@IBOutlet weak var txtSSNeumorphic: SSBaseTextField! {
    didSet {
        txtSSNeumorphic.txtDepthType = .innerShadow
    }
}

Create neumorphic button with the Outer shadow.

| <center> Light Mode </center> | <center> Dark Mode </center> | |----------|----------| | <img src="Screenshots/UI-Kit-Demo-SS/button-light.png" > | <img src="Screenshots/UI-Kit-Demo-SS/button-dark.png" > |

@IBOutlet weak var btnNeumorphic: SSNeumorphicButton! {
    didSet {
        btnNeumorphic.btnDepthType = .outerShadow
    }
}

Create neumorphic rounded button with the inner shadow.

| <center> Light Mode </center> | <center> Dark Mode </center> | |----------|----------| | <img src="Screenshots/UI-Kit-Demo-SS/round-button-light.png" > | <img src="Screenshots/UI-Kit-Demo-SS/round-button-dark.png" > |

@IBOutlet weak var btnRoundedNeumorphic: SSNeumorphicButton! {
    didSet {
        btnRoundedNeumorphic.btnDepthType = .innerShadow
        btnRoundedNeumorphic.layer.masksToBounds = true
        btnRoundedNeumorphic.btnNeumorphicCornerRadius =  btnRoundedNeumorphic.frame.width/2
    }
}

How to Use with SwiftUI: :jigsaw:

Import Neumorphic package to your view.

import SSNeumorphicView

Create Neumorphic Shape with Inner shadow modifier.

| <center> Light Mode</center> | <center> Dark Mode </center> | |----------|----------| |<img src="Screenshots/SwiftUI-Demo-Screen-Shots/shape-light-inner-shadow.png"> | <img src="Screenshots/SwiftUI-Demo-Screen-Shots/shape-dark-inner-shadow.png" > |

var body: some View {
        
    ZStack {
            
        // Apply main background color
        mainColor   
            
        VStack {
            RoundedRectangle(cornerRadius: 25)

                // Fill the shape with samecolor as background
                .fill(mainColor)    
                .frame(width: 150, height: 150)

                 // Apply inner shadow modifier
                .innerShadow(RoundedRectangle(cornerRadius: 25),   
                                darkShadow: darkShadow, // Pass dark shadow color for the innerShadow
                                lightShadow: lightShadow)   // Pass light shadow color for the outerShadow
        }
    }
    .edgesIgnoringSafeArea(.all)
}

Create Neumorphic Shape with Outer shadow modifier.

| <center> Light Mode</center> | <center> Dark Mode </center> | |----------|----------| |<img src="Screenshots/SwiftUI-Demo-Screen-Shots/shape-light-outer-shadow.png" > | <img src="Screenshots/SwiftUI-Demo-Screen-Shots/shape-dark-outer-shadow.png" > |

var body: some View {
        
        ZStack {
            
            // Apply main background color
            mainColor
            
            VStack {
                RoundedRectangle(cornerRadius: 25)
                
                    // Fill the shape with same color as background
                    .fill(mainColor)
                    .frame(width: 150, height: 150)
                
                    // Apply the outer shadow modifier and pass the dark and light shadow colors
                    .outerShadow(darkShadow: darkShadow, lightShadow: lightShadow)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }

Create Neumorphic Button Using NMButtonStyle.

| <center> Light Mode</center> | <center> Dark Mode </center> | |----------|----------| |<img src="Screenshots/SwiftUI-Demo-Screen-Shots/button-light.png" > | <img src="Screenshots/SwiftUI-Demo-Screen-Shots/button-dark.png" > |

var body: some View {
        
        ZStack {
            
            // Apply main background color
            mainColor
            
            VStack {
                Button(action: {
                    print("Button tapped")
                }) {
                    Text("Tap me!")
                }
                
                // Use Custom NMButtonStyle to make the button Neumorphic.
                .buttonStyle(NMButtonStyle(shape: RoundedRectangle(cornerRadius: 20),
                                           primaryColor: mainColor,
                                           lightColor: lightShadow,
                                           darkColor: darkShadow))
            }
        }
        .edgesIgnoringSafeArea(.all)
    }

NOTE: To fully customize the NMButtonStyle checkout NMButtonStyleGuide.md.

Create Neumorphic Image Button using NMButtonStyle.

| <center> Light Mode</center> | <center> Dark Mode </center> | |----------|----------| |<img src="Screen