Get started

Using NPM

Run the following command:

npm install --save leonardo-ui

Add the following to your HTML:

  <link rel="stylesheet" href="node_modules/leonardo-ui/dist/leonardo-ui.css" type="text/css"/>
  <!-- Page content -->
  <script src="node_modules/leonardo-ui/dist/leonardo-ui.js" type="text/javascript"></script>

To use the icon font (optional), add this to your CSS:

@font-face {
  font-family: "LUI icons";
  src: url(node_modules/leonardo-ui/dist/lui-icons.woff) format('woff'),
     url(node_modules/leonardo-ui/dist/lui-icons.ttf) format('truetype');


Alternatively, you can download a bundle and follow the instructions above. Replace the paths starting with node_modules. The bundle includes the same artifacts as the NPM package plus some code examples.


You may include any version of these artifacts. Notice that using Javascripts is optional and you are free to provide your own custom implementation.

Artifact Description
leonardo-ui.min.css Minified CSS file to use in production
leonardo-ui.css CSS Source maps for CSS
leonardo-ui.min.js Minified JS file to use in production
leonardo-ui.js JS Source maps for JS
colors.less Color palette variables
variables.less General variables plus component specific variables (work ongoing)
lui-icons.ttf Truetype icon font
lui-icons.woff WOFF icon font