- Works with all frameworks đ§Š
- Works with CDNs đ
- Fully customizable with CSS đ¨
- Includes a dark theme đ
- Built with accessibility in mind âŋī¸
- First-class React support âī¸
- Built-in localization đŦ
- Open source đ¸
-
More awesome than ever
Quick Start
Add the following code to your page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" /> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js">script>
Now you have access to all of Shoelaceâs components! Try adding a button:
<sl-button>Click mesl-button>
This will activate Shoelaceâs experimental autoloader, which registers components on the fly as you use
them. To learn more about it, or for other ways to install Shoelace, refer to the
installation instructions.
New to Web Components?
TL;DR â we finally have a way to create
our own HTML elements
and use them in any framework we want!
Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has
become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable
building blocks. 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 frameworks/versions 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 for many years to come.
This is the technology that Shoelace is built on.
What Problem Does This Solve?
Shoelace provides a collection of professionally designed, highly customizable UI components built on a
framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch?
Why make a component library that only works with one framework?
With Shoelace, you can:
- Start building things faster (no need to roll your own buttons)
- Build multiple apps with different frameworks that all share the same UI components
- Fully customize components to match your existing designs
- Incrementally adopt components as needed (no need to ditch your framework)
- Upgrade or switch frameworks without rebuilding foundational components
If your organization is looking to build a design system,
Shoelace will save you thousands of dollars. All the foundational components you need are right here, ready to be customized for your brand. And since
itâs built on web standards, browsers will continue to support it for many years to come.
Whether you use Shoelace as a starting point for your organizationâs design system or for a fun personal
project, thereâs no limit to what you can do with it.
Browser Support
Shoelace is tested in the latest two versions of the following browsers.
Critical bug fixes in earlier versions will be addressed based on their severity and impact.
If you need to support IE11 or pre-Chromium Edge, this library isnât for you. Although web components can
(to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If
youâre using Shoelace in such a browser, youâre gonna have a bad time. âˇ
License
Shoelace was created in New Hampshire by
Cory LaViska. Itâs available under the terms of the
MIT license.
Attribution
Special thanks to the following projects and individuals that help make Shoelace possible.
-
Components are built with
Lit -
Component metadata is generated by the
Custom Elements Manifest Analyzer -
Documentation is powered by
11ty -
CDN services are provided by
jsDelivr -
Color primitives are inspired by
Tailwind -
Icons are courtesy of
Bootstrap Icons -
The homepage illustration is courtesy of
unDraw -
Positioning of dropdowns, tooltips, et al is handled by
Floating UI -
Animations are courtesy of
animate.css -
Search is powered by
Lunr -
The Shoelace logo was designed with a single shoelace by
Adam K Olson
Great job