2.9 KiB
A forward-thinking web component library for desktop and mobile.
Here's why you'll love it:
- 🧩 Works with any framework
- ⚡️ Can be loaded via CDN
- 🎨 Fully customizable with pure CSS — no build required!
Shoelace is designed and developed in New Hampshire by @claviska. You can use it under the terms of the MIT License.
Quick Start
The fastest way to get started is with the CDN. Add this to your <head> section:
<link rel="stylesheet" src="//SOME_CDN/shoelace/shoelace.css">
<script type="module" src="//SOME_CDN/shoelace/shoelace.esm.js"></script>
Now you have access to all of Shoelace's components! Try adding a button to your page:
<sl-button>Click Me</sl-button>
!> Don't want to use the CDN? Check out the installation instructions for more options.
Web Components
TL;DR – we finally have a way to create our very own HTML elements and use them in any framework we want!
Thanks to the popularity of frameworks such as React, Vue, and Angular, component-driven development is a way of life for front-end developers. Components are awesome, and they make a lot of sense in terms of design, development, and testing.
Unfortunately, framework-specific components fail us in a number of ways:
- 🔒 You can only use them in the framework they're designed for
- ⏳ Their lifespan is limited to that of the framework's
- 😭 New versions of the framework can lead to breaking changes, requiring substantial effort to update components
Web Components solve these problems. They're supported by all modern browsers, they're framework-agnostic, and they're part of the standard, so we know they'll be supported by browsers for many years to come.
Browser Support
Shoelace is built for modern browsers. If you need to support IE11 or pre-Chromium Edge, you probably don't want to use this library.
Although Web Components can (to some degree) be polyfilled for older browsers, supporting them is outside the scope of this project. If you're using Shoelace in a legacy browser, things will probably not work the way they're intended to.
Attribution
- Components are compiled by Stencil
- Theme colors and form controls are inspired by Element
- Icons are courtesy of Feather Icons
- Positioning of menus, popovers, etc. is handled by Popper.js
- Tooltips are powered by Tippy.js
- Documentation is powered by Docsify
- The Shoelace logo was designed with a single shoelace by Adam K Olson