{"id":20185485,"url":"https://github.com/cred-club/synth-ios","last_synced_at":"2025-04-05T08:06:14.516Z","repository":{"id":43533337,"uuid":"271593527","full_name":"CRED-CLUB/synth-ios","owner":"CRED-CLUB","description":"Synth is CRED's inbuilt library for using Neumorphic components in your app.","archived":false,"fork":false,"pushed_at":"2022-07-03T11:41:09.000Z","size":710,"stargazers_count":535,"open_issues_count":5,"forks_count":45,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-03-29T07:05:21.893Z","etag":null,"topics":["design","ios","neumorphism","swift","synth","ui"],"latest_commit_sha":null,"homepage":"https://blog.cred.club/team-cred/design/world-meet-neumorphism-open-sourcing-our-ui-framework/","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CRED-CLUB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-11T16:21:25.000Z","updated_at":"2025-03-10T02:57:00.000Z","dependencies_parsed_at":"2022-07-18T18:42:25.343Z","dependency_job_id":null,"html_url":"https://github.com/CRED-CLUB/synth-ios","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-ios","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-ios/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-ios/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-ios/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CRED-CLUB","download_url":"https://codeload.github.com/CRED-CLUB/synth-ios/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","ios","neumorphism","swift","synth","ui"],"created_at":"2024-11-14T03:13:24.669Z","updated_at":"2025-04-05T08:06:14.496Z","avatar_url":"https://github.com/CRED-CLUB.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Synth\nSynth is CRED's inbuilt library for using Neumorphic components in your app.\n\nWhat really is Neumorphism? It's an impressionistic style, playing with light, shadow, and depth to create a digital experience inspired by the physical world. That's the definition anyway. Our recommendation is you try it out to see what you make of it. If you do create something with Synth, let us know. We're excited to see where you take it.\n\nA note for the curious: if you wish to learn more about Synth, we have a post detailing the concept and CRED's philosophy behind it [here](https://blog.cred.club/team-cred/design/world-meet-neumorphism-open-sourcing-our-ui-framework/).\n\nFor Android, checkout [Synth-Android](https://github.com/CRED-CLUB/synth-android)\n\n![Banner](https://i.imgur.com/tKZeAwO.png \"Banner\")\n\n## Installation\n\n### Cocoapods\n\nIt can be easily integrated with Cocoapods. Add this line to your podfile:\n```swift\npod 'synth-ios'\n```\n\n### Swift Package Manager\n\nFollow [this doc](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) to add a new dependency to your project. If your `Package.swift` is already setup, add this line to project dependencies.\n```swift\ndependencies: [\n    .package(url: \"https://github.com/CRED-CLUB/synth-ios\", from: \"1.0.0\")\n],\n```\n\n## Requirements\n- iOS 11.0+\n- Swift 5.1+\n\n## Usage\n\n### Embossed and Debossed views\n\n![Embossed and Debossed Views](https://i.imgur.com/BVirv0g.png \"Embossed and Debossed Views\")\n\nAs it provides an extension over `UIView`, you can call it over any UI element\n```swift\nlet embossedView = UIView()\nembossedView.applyNeuStyle()\n```\ncalling `applyNeuStyle` on any view will give default embossed effect. There is also a helper function `getDebossModel()` in `NeuUIHelper` which provides debossed effect.\n\n```swift\nlet debossedView = UIView()\ndebossedView.applyNeuStyle(model: NeuUIHelper.getDebossModel())\n```\n\n### `applyNeuStyle` arguments\n\n| attribute | description | value |\n|--|--|--|\n| `model`| struct which lets you configure base color, shadow direction and shadow offsets | `NeuViewModel` |\n| `showOnlyShadows` | enabling this will only render outer or inner shadows skipping the solid background part | Bool |\n\n### `NeuViewModel` attributes\n\nall colors are by default derived from base color. You can explictly pass different values when needed.\n\n| attribute | description | value |\n|--|--|--|\n| `baseColor`| base color based on which background and borders are rendered | UIColor |\n| `bgGradientColors` | colors array which renders background | [UIColor] |\n| `borderGradientColors` | colors array which renders borders | [UIColor] |\n| `borderGradientWidth` | outer border width | CGFloat |\n| `lightDirection` | an enum which lets define light direction | `NeuLightDirection` |\n| `shadowType` | an enum which lets define shadow type, outer or inner | `NeuShadowType` |\n| `lightShadowModel` | a model to customise shadow offsets of top shadow | `NeuShadowModel` |\n| `darkShadowModel` | a model to customise shadow offsets of bottom shadow | `NeuShadowModel` |\n| `blurAmount` | amount of guassian blur that has to be applied | CGFloat |\n| `hideLightShadow` | hides top shadow | Bool |\n| `hideDarkShadow` | hides bottom shadow | Bool |\n| `hideBorder` | hides outer border | Bool |\n\n# Buttons\n\nThere are by default four styles which can be applied over `UIButton`:\n```swift\nelevatedSoft // an embossed button\nelevatedSoftRound // a round embossed button\nelevatedFlat // flat button\nelevatedFlatRound // flat round button\n```\n\n## Elevated soft button\n\n![Elevated Soft Button](https://i.imgur.com/ih0WqFz.png \"Elevated Soft Button\")\n\n```swift\nlet softButton = UIButton()\nsoftButton.applyNeuBtnStyle(type: .elevatedSoft, title: \"Idle\")\n```\n\n## Elevated soft round button\n\n![Elevated soft round Button](https://i.imgur.com/eP17O6M.png \"Elevated soft round Button\")\n\n```swift\nlet roundButton = UIButton()\nroundButton.applyNeuBtnStyle(type: .elevatedSoftRound, image: UIImage(named: \"plus\"))\n```\n\n## Elevated flat button\n\n![Elevated Flat Button](https://i.imgur.com/tgVOK5L.png \"Elevated Flat Button\")\n\nElevated flat button renders a flat surface on top of the elevated neumorphic platform. this flat surface can be customized in two ways:\n```swift\nlet flatButton = UIButton()\nflatButton.applyNeuBtnStyle(type: .elevatedFlat, title: \"Idle\")\n```\n\n![Drawable Button](https://i.imgur.com/Bnjb5Cj.png \"Drawable Button\")\n\nyou can also add an image aligned left to this image. synth will render a neumorphic pit on which the image is rendered.\n```swift\nsoftButton.applyNeuBtnStyle(type: .elevatedSoft, title: \"Idle\", image: UIImage(named: \"plus\"), imageDimension: 12)\nsoftButton.applyNeuBtnStyle(type: .elevatedFlat, title: \"Idle\", image: UIImage(named: \"plus\"), imageDimension: 12)\n```\n\nThis button is made up of three layers `baseModel`, `innerModel` and `buttonContentModel` named from bottom to top. `NeuButtonCustomModel` allows you to configure each of these layers and design button.\n```swift\nimport Synth\n\nlet model = NeuConstants.NeuButtonCustomModel()\n... some configuration\nlet customButton = UIButton()\ncustomButton.applyNeuBtnStyle(customModel: model, title: \"Custom Button\")\n```\n\nThis library works over base color concept and derives light and dark colors from base color itself. All views and buttons will be using this color to design neumorphic elements. This base color can be set at app start. Similarly, text attributes can be applied at an app-level to give default style to all neumorphic buttons. \n```swift\nNeuUtils.baseColor = UIColor.red\n\nlet textAttributes: [NSAttributedString.Key:Any] = [:]\ntextAttributes[.foregroundColor] = .black\nNeuUtils.textAttributes = textAttributes\n```\n\n## Contributing\n\nPull requests are welcome! We'd love help improving this library. Feel free to browse through open issues to look for things that need work. If you have a feature request or bug, please open a new issue so we can track it.\n\n## Contributors\n\nSynth would not have been possible if not for the contributions made by CRED's design and frontend teams.\n\n## License\n\n```\nCopyright 2020 Dreamplug Technologies Private Limited.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcred-club%2Fsynth-ios","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcred-club%2Fsynth-ios","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcred-club%2Fsynth-ios/lists"}