Shoelace is incredibly easy to use. To get started, simply link to shoelace.css in your project. You can use the CDN version or download the source manually.

To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load jQuery or Zepto along with shoelace.js.


The easiest way to use Shoelace is via CDN. Just add this to your <head>:

<link rel="stylesheet" href="">

And this before </body> but after jQuery/Zepto:

<script src=""></script>

This service is provided free, courtesy of CDNJS. New releases can take up to 12 hours to appear on the CDN.


Alternatively, you can download the source and link to shoelace.css from your own server. Just add this stylesheet to your <head>:

<link rel="stylesheet" href="dist/shoelace.css">

And this before </body> but after jQuery/Zepto:

<script src="dist/shoelace.js"></script>


If you’re using NPM, you can install Shoelace by running:

npm install shoelace-css