Where the stuff happens

Leonardo UI

Leonardo UI is a UI component framework with a slim design that adds awesome looking components to your web page. All components are cross-browser and ready-to-use in modern browsers. They work well together with other popular frameworks, such as Bootstrap and Foundation.


Use as is with the provided vanilla JS, with a framework implementation or with your own custom implementation.


Leonardo UI will not set any global stylings but will use your page defaults. This minimizes the risk of conflicting styles when used together with other frameworks.

Developer focus

The developer is always in full control over what's going on. Utilization of BEM classes makes components self-contained and easy-to-use.

Example of a button

<button class="lui-button">Default</button>

Example of a switch

<div class="lui-switch">
  <label class="lui-switch__label">
    <input type="checkbox" class="lui-switch__checkbox"/>
    <span class="lui-switch__wrap">
      <span class="lui-switch__inner"></span>
      <span class="lui-switch__switch"></span>