A forward-thinking library of web components.
Go to file
Lindsay M 42fbed116b
Increase contrast of interactive element borders in dark mode (#2100)
* increase contrast of interactive element borders

* match default button borders to input borders

* revert tag border change
2024-07-15 11:45:29 -04:00
.github revert 2023-11-20 20:38:09 -05:00
.husky update dependencies, cleanup, refine (#642) 2022-01-06 08:44:13 -05:00
.vscode update settings 2023-12-13 12:00:23 -05:00
docs run linting (#2104) 2024-07-10 11:29:10 -04:00
scripts remove styles from template 2024-02-09 10:27:09 -05:00
src Increase contrast of interactive element borders in dark mode (#2100) 2024-07-15 11:45:29 -04:00
.editorconfig Update .editorconfig (#880) 2022-08-26 09:16:57 -04:00
.eslintignore Button tests (#667) 2022-03-11 08:56:24 -05:00
.eslintrc.cjs Lit a11y update (#1444) 2023-07-12 11:12:15 -04:00
.gitignore don't ignore 2024-01-23 11:24:02 -05:00
.gitpod.yml Adding Gitpod support (#661) 2022-02-01 16:53:49 -05:00
.prettierignore ignore package.json 2023-08-16 14:57:03 -04:00
CONTRIBUTING.md update docs 2021-03-23 13:52:15 -04:00
LICENSE.md 2.0 cleanup 2020-07-15 17:30:37 -04:00
README.md use discussions for features 2023-10-16 11:23:36 -04:00
cspell.json Improve tooltip accessibility (#1749) 2023-12-01 10:02:46 -05:00
custom-elements-manifest.config.js add vue types (#1797) 2024-01-23 10:34:36 -05:00
lint-staged.config.js feat: add ESLint, improve types, improve a11y 2022-01-15 21:47:14 -08:00
package-lock.json 2.15.1 2024-05-21 08:38:00 -04:00
package.json 2.15.1 2024-05-21 08:38:00 -04:00
prettier.config.js update prettier 2023-10-12 13:56:11 -04:00
tsconfig.json Add missing extensions (#1770) 2023-12-08 12:30:31 -05:00
tsconfig.prod.json remove baseUrl from tsconfig for better dev experience (#1530) 2023-08-22 10:32:15 -04:00
web-test-runner.config.js Run web test runner with production modules (#1736) 2023-11-21 11:19:06 -05:00



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

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 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! 🥾