Soft UI Library

Soft-UI Library is a Collection of UI Elements implementing a neumorphic design pattern with light/dark mode toggle.

CSS

Copy the css here in your project and you're good to go 👍

NPM/YARN

      
    npm install soft-ui-library
    
    # OR
    
    yarn add soft-ui-library

And import the content of the directory below to your project

      
    //Using A JS Library (React,Vue,...)

    import "soft-ui-library/dist/css/neumorphism-ui.css"
      

      
    <!--Pure Html-->

    <link rel="stylesheet" 
    href="node_modules/soft-ui-library/dist/css/neumorphism-ui.css"/>

💡 IMPORTANT

Make sure to add the class "light-mode" or "dark-mode" to the body of your html. This will load the necessary css classes and apply a reset to your html.

Buttons

        
    <input type="text" class="sul-text-field" placeholder="Text Fied" />
    <input type="password" class="sul-text-field" placeholder="Password Field" />

    <a class="sul-btn">
      <i class="fas fa-sign-in-alt"></i> 
      Button
    </a>

    <textarea class="sul-text-field" rows="5" placeholder="Text Area Field"></textarea>

    <a class="sul-btn btn-primary">
      <i class="fas fa-sign-in-alt"></i> 
      Button Primary
    </a>

Radio Buttons

Radio Button Radio Button Radio Button

        
    <input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
    <input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
    <input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
    
    <input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
    <input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
    <input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
    
    <input type="radio" class="sul-radio" name="radio"> Radio Button
    <input type="radio" class="sul-radio" name="radio"> Radio Button
    <input type="radio" class="sul-radio" name="radio"> Radio Button

Select

        
    <label class="sul-select-wrapper" for="select-el">
      <select name="select" class="sul-select" id="select-el">
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
      </select>
    </label>

Boxes

      
    <div class="sul-box-raised-1 with-hover">
      sul-box-raised-1 with-hover
    </div>
    
    <div class="sul-box-raised-2 with-hover">
      sul-box-raised-2 with-hover
    </div>
    
    <div class="sul-box-raised-3 with-hover">
      sul-box-raised-3 with-hover
    </div>
    
    <div class="sul-box-inset-1 with-hover">
      sul-box-inset-1 with-hover
    </div>

CSS

NPM/YARN

💡 IMPORTANT

Text Fields

Buttons

Check Boxes

Radio Buttons

Select

Sliders

Boxes

Light/Dark Modes