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: 3 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 (9 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

        
[![Twitter](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fsoft.components.rocks)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fseanwuapps%2Fsoft-components)

![Twitter Follow](https://img.shields.io/twitter/follow/softcomponents?style=social)

![npm bundle size](https://img.shields.io/bundlephobia/min/soft-components)

![npm](https://img.shields.io/npm/v/soft-components)

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

![Logo](./docs/src/assets/img/logo.svg "Logo")

# 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