{"id":14957200,"url":"https://github.com/akaspanion/ui-neumorphism","last_synced_at":"2025-05-16T09:02:45.249Z","repository":{"id":40655749,"uuid":"263099245","full_name":"AKAspanion/ui-neumorphism","owner":"AKAspanion","description":"📕 React component library designed on the \"new skeuomorphism\" or \"neumorphism\" UI/UX trend. ","archived":false,"fork":false,"pushed_at":"2024-07-17T11:23:34.000Z","size":10003,"stargazers_count":621,"open_issues_count":7,"forks_count":57,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-16T09:02:05.000Z","etag":null,"topics":["components","library","neumorphic","neumorphism","neumorphism-ui","react","reactjs","reactjs-components","skeumorphism","ui","ui-neumorphism","web"],"latest_commit_sha":null,"homepage":"https://akaspanion.github.io/ui-neumorphism/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AKAspanion.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-11T16:35:54.000Z","updated_at":"2025-05-10T09:54:47.000Z","dependencies_parsed_at":"2024-09-29T06:18:43.146Z","dependency_job_id":null,"html_url":"https://github.com/AKAspanion/ui-neumorphism","commit_stats":{"total_commits":201,"total_committers":3,"mean_commits":67.0,"dds":"0.13432835820895528","last_synced_commit":"b94b185ce6865c9c47469a4361fe95de88604aef"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AKAspanion%2Fui-neumorphism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AKAspanion%2Fui-neumorphism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AKAspanion%2Fui-neumorphism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AKAspanion%2Fui-neumorphism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AKAspanion","download_url":"https://codeload.github.com/AKAspanion/ui-neumorphism/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501555,"owners_count":22081528,"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":["components","library","neumorphic","neumorphism","neumorphism-ui","react","reactjs","reactjs-components","skeumorphism","ui","ui-neumorphism","web"],"created_at":"2024-09-24T13:14:19.690Z","updated_at":"2025-05-16T09:02:45.215Z","avatar_url":"https://github.com/AKAspanion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [ui-neumorphism](https://akaspanion.github.io/ui-neumorphism/)\n\n[![NPM](https://img.shields.io/npm/v/ui-neumorphism.svg)](https://www.npmjs.com/package/ui-neumorphism) [![Build Status](https://travis-ci.org/AKAspanion/ui-neumorphism.svg?branch=master)](https://travis-ci.org/AKAspanion/ui-neumorphism) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/AKAspanion/ui-neumorphism/blob/master/LICENSE) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e React component library designed on the \"new skeuomorphism\" or \"neumorphism\" UI/UX trend.\n\nAll the components are designed according to the neumorphic design trend.\n\nLibrary features more than 50 individual components.\n\n## Demo\n\n![Fitness App by Jray](https://firebasestorage.googleapis.com/v0/b/spanion-portfolio.appspot.com/o/fitness--theme.jpg?alt=media\u0026token=df27927a-bfcf-4b54-85e7-bde8a72d3947)\n\nView examples [here](https://akaspanion.github.io/ui-neumorphism/examples).\n\n## Documentation\n\nEach component, and its API is well documented, with various examples along with their code and preview.\n\nCheck out the documentation [here](https://akaspanion.github.io/ui-neumorphism/).\n\n## Install\n\n```bash\nnpm install --save ui-neumorphism\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport { Button } from 'ui-neumorphism'\nimport 'ui-neumorphism/dist/index.css'\n\nclass Example extends Component {\n  render() {\n    return \u003cButton /\u003e\n  }\n}\n```\n\n## Theming\n\nIn neumorphism UI, theming is dead simple.\nIt is accomplished by using and modifying root css variables for colors.\n\nTo change the theme, you modify the root css variables directly or with the help of `overrideThemeVariables()` function, like this.\n\n```javascript\nimport React, { Component } from 'react'\n\nimport { overrideThemeVariables } from 'ui-neumorphism'\nimport 'ui-neumorphism/dist/index.css'\n\nclass App extends Component {\n  componentDidMount() {\n    // takes an object of css variable key-value pairs\n    overrideThemeVariables({\n      '--light-bg': '#E9B7B9',\n      '--light-bg-dark-shadow': '#ba9294',\n      '--light-bg-light-shadow': '#ffdcde',\n      '--dark-bg': '#292E35',\n      '--dark-bg-dark-shadow': '#21252a',\n      '--dark-bg-light-shadow': '#313740',\n      '--primary': '#8672FB',\n      '--primary-dark': '#4526f9',\n      '--primary-light': '#c7befd'\n    })\n  }\n\n  ...\n}\n```\n\nHere `--light-bg` and `--dark-bg` are css variables that hold specific values of color.\n\nUsing this power of CSS variables, you can change the app theme from anywhere in the entire application.\n\nAll the css variable definition is present in root tag of [index.css](/src/components/styles.css).\nThese variables are used to theme the library and its available for you to modify.\n\n## License\n\nMIT © [AKAspanion](https://github.com/AKAspanion)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakaspanion%2Fui-neumorphism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakaspanion%2Fui-neumorphism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakaspanion%2Fui-neumorphism/lists"}