Installing
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
.
CDN
The easiest way to use Shoelace is via CDN. Just add this to your <head>
:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.css">
And this before </body>
but after jQuery/Zepto:
<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.js"></script>
This service is provided free, courtesy of CDNJS. New releases can take up to 12 hours to appear on the CDN.
Download
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>
NPM
If you’re using NPM, you can install Shoelace by running:
npm install shoelace-css