Important
Shoelace is sunset. There is no active development on this codebase. The library remains available under the MIT license for existing use, but please do not open issues, pull requests, or feature requests here—direct those to Web Awesome, the successor project, at github.com/shoelace-style/webawesome.
What “Sunset” Means: Shoelace has no active development. Issues, pull requests, and feature requests belong on Web Awesome, not this repository. The published package remains available under the MIT license for existing use. Archiving this repo on GitHub (optional but recommended) is how you mark it read-only on the platform—see For Repository Maintainers below.
Web Awesome, like Shoelace before it, offers an even larger library of free components, plus themes, utilities, patterns, and more.
A forward-thinking library of web components.
- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
- Includes an official dark theme 🌛
- Built with accessibility in mind ♿️
- Open source 😸
- Documentation: shoelace.style
- Shoelace source (sunset): github.com/shoelace-style/shoelace
- Web Awesome (active development): website · source
The sections below are for historical reference—for example, running the docs or a build from source, auditing the codebase, or maintaining a private fork. New components and ongoing development belong on Web Awesome, not here. You will need Node >= 14.17 to build and run the project locally.
You do not need any of this to use Shoelace as a dependency. For installation and usage, see the documentation website.
Components are built with LitElement, a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by esbuild.
You can still fork the repo on GitHub for your own experiments, then clone it locally and install dependencies.
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm installOnce you've cloned the repo, run the following command.
npm startThis will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
To generate a production build, run the following command.
npm run buildDevelop new components on Web Awesome, not in this repository. If you maintain a private fork and still use the old tooling, the historical scaffold was npm run create <tag-name>—that workflow is unsupported.
Shoelace is open source under the MIT license, but this repository is not accepting contributions. For bug reports, features, and pull requests, use Web Awesome (repository). See CONTRIBUTING.md.
Shoelace is available under the terms of the MIT license.
Whether you are using Shoelace in a project or exploring this source tree — have fun creating! 🥾
