Soft components

A set of decorative web components inspired by the neumorphism design


Framework agnostic

Soft components are Web Components, utilising the browser's capability, the components work with (and without) any JavaScript framework.

Find out how to integrate with your favourite framework.

Easily customisable

Every component has a set of CSS variables allowing you to theme it to suit your needs. There are also a number of attributes that can be used to give your component a different look and feel, look out for the button in the component's page to play with the CSS variables.

Tiny size npm bundle size

The components are lazy-loaded only when they are used in the mark-up. This means if you only want to use 1 component of the entire set, you can still use the same set-up and the performance stays optimal.

Get in touch

I love talking to people to see how things can be improved.

Drop an email
--sc-bg-color: #921EE7;
--sc-text-color: #FFFFFF;
--sc-highlight-color: rgba(255, 255, 255, 0.14);
--sc-shadow-color: rgba(0, 0, 0, 0.48);
--sc-secondary-color: #4ef26e;
--sc-active-color: #7c4993;