Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seanwuapps/soft-components
Decorative UI Toolkit based on Neumorphism design
https://github.com/seanwuapps/soft-components
css design-system front-end html javascript ui-kit web-components
Last synced: 4 months ago
JSON representation
Decorative UI Toolkit based on Neumorphism design
- Host: GitHub
- URL: https://github.com/seanwuapps/soft-components
- Owner: seanwuapps
- License: mit
- Created: 2019-12-28T22:42:27.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:23:23.000Z (about 2 years ago)
- Last Synced: 2024-05-01T18:42:20.102Z (10 months ago)
- Topics: css, design-system, front-end, html, javascript, ui-kit, web-components
- Language: TypeScript
- Homepage: https://soft.components.rocks
- Size: 3.31 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 31
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fseanwuapps%2Fsoft-components)





# Soft components
Like the recently popular neumorphism design?
You can read more about neumorphism design in these articles:
- [Neumorphism in user interfaces](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6)
- [Neumorphism: why it’s all the hype in UI design](https://www.justinmind.com/blog/neumorphism-ui/)
- [Neumorphism the right way — A 2020 Design Trend](https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a)Use these components with any framework you wish or no framework at all!
[Documentation](https://soft.components.rocks/)
## Getting started
There are a couple of ways you can get started with Soft Components:
### CDN
```html
```
### Install via npm
```bash
npm i soft-components
```### JS framework integration
Soft components are built with the help of [Stencil](https://stenciljs.com/).
[Stencil](https://stenciljs.com/) provides a comprehensive [documentation](https://stenciljs.com/docs/overview) on how the web components can be integrated with popular JavaScript frameworks, they can be found here:
- [Angular](https://stenciljs.com/docs/angular)
- [React](https://stenciljs.com/docs/react)
- [Vue](https://stenciljs.com/docs/vue)
- [Ember](https://stenciljs.com/docs/ember)## Components roadmap
- [x] `sc-progress` - progress bar
- [ ] `sc-range` - `input type="range"` equivalent
- [ ] `sc-dial` - dial input
- [ ] `sc-radio` - radio button
- [ ] `sc-select` - `select` dropdown box
- [ ] `sc-file` - `input type="file"` equivalent
- [ ] `sc-textarea` - `textarea` equivalent