A forward-thinking library of web components.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Cory LaViska b281c5bbc1
use Set instead of WeakMap
22 hours ago
.github remove 16.x from actions 2 days ago
.husky update dependencies, cleanup, refine (#642) 1 year ago
.vscode sort this, eslint 4 weeks ago
docs fix checkbox required label in Chrome 1 day ago
scripts fix web-types.json 2 weeks ago
src use Set instead of WeakMap 22 hours ago
.editorconfig Update .editorconfig (#880) 6 months ago
.eslintignore Button tests (#667) 11 months ago
.eslintrc.cjs sort this, eslint 4 weeks ago
.gitignore add react support into lib 1 year ago
.gitpod.yml Adding Gitpod support (#661) 1 year ago
.prettierignore add prettier and eslint to markdown 11 months ago
CONTRIBUTING.md update docs 2 years ago
LICENSE.md 2.0 cleanup 3 years ago
README.md update min node version 1 year ago
cspell.json sort this, eslint 4 weeks ago
custom-elements-manifest.config.js revert; #1166 5 days ago
lint-staged.config.js feat: add ESLint, improve types, improve a11y 1 year ago
package-lock.json fixes #1172 3 days ago
package.json fixes #1172 3 days ago
prettier.config.cjs add env 10 months ago
tsconfig.json Update tsconfig 2 months ago
tsconfig.prod.json Revert recent changes 11 months ago
vercel.json 2.0 cleanup 3 years ago
web-test-runner.config.js update config 3 weeks ago



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 😸

Designed in New Hampshire by Cory LaViska.

Documentation: shoelace.style

Source: github.com/shoelace-style/shoelace

Twitter: @shoelace_style

Shoemakers 🥾

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.

What are you using to build Shoelace?

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.

Forking the Repo

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 Shoelace 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.

The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.


To generate a production build, run the following command.

npm run build

Creating New Components

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 is designed in New Hampshire by Cory LaViska. Its available under the terms of the MIT license.

Designing, developing, and supporting this library requires a lot of time, effort, and skill. Id like to keep it open source so everyone can use it, but that doesnt provide me with any income.

Therefore, if youre using my software to make a profit, I respectfully ask that you help fund its development by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.

👇 Your support is very much appreciated! 👇

Whether you're building Shoelace or building something with Shoelace — have fun creating! 🥾