@shoelace-style/shoelace
Advanced tools
A forward-thinking library of web components.
Designed in New Hampshire by Cory LaViska.
Documentation: shoelace.style
Source: github.com/shoelace-style/shoelace
Twitter: @shoelace_style
Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
You don't need to do any of this to use Shoelace! This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
If that's not what you're trying to do, the documentation website is where you want to be.
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.
Start by forking the repo on GitHub, then clone it locally and install dependencies.
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install
Once you've cloned the repo, run the following command.
npm start
This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's 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 build
To scaffold a new component, run the following command, replacing sl-tag-name with the desired tag name.
npm run create sl-tag-name
This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the contribution guidelines first.
Shoelace was created by Cory LaViska and is available under the terms of the MIT license.
Whether you're building Shoelace or building something with Shoelace — have fun creating! 🥾
FAQs
A forward-thinking library of web components.
The npm package @shoelace-style/shoelace receives a total of 48,298 weekly downloads. As such, @shoelace-style/shoelace popularity was classified as popular.
We found that @shoelace-style/shoelace demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.