# @shoelace-style/shoelace > A forward-thinking library of web components. Latest version **2.20.1** (published 2025-03-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @shoelace-style/shoelace pnpm add @shoelace-style/shoelace yarn add @shoelace-style/shoelace bun add @shoelace-style/shoelace ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score; popular repo. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 2.20.1 | | Published | 2025-03-11 | | First published | 2020-07-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Node | >=14.17.0 | | Dependencies | 8 | | Unpacked size | 8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 13824 | | Author | Cory LaViska | | Maintainers | claviska, supercodepoet | | Keywords | web components, custom elements, components | ## Links - npm: https://www.npmjs.com/package/@shoelace-style/shoelace - Repository: https://github.com/shoelace-style/shoelace - Issues: https://github.com/shoelace-style/shoelace/issues - Funding: https://github.com/sponsors/claviska - npm.io page: https://npm.io/package/@shoelace-style/shoelace ## Dependencies (8) - [lit](https://npm.io/package/lit.md) ^3.2.1 - [@lit/react](https://npm.io/package/@lit/react.md) ^1.0.6 - [qr-creator](https://npm.io/package/qr-creator.md) ^1.0.0 - [@ctrl/tinycolor](https://npm.io/package/@ctrl/tinycolor.md) ^4.1.0 - [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^1.6.12 - [@shoelace-style/localize](https://npm.io/package/@shoelace-style/localize.md) ^3.2.1 - [composed-offset-position](https://npm.io/package/composed-offset-position.md) ^0.0.6 - [@shoelace-style/animations](https://npm.io/package/@shoelace-style/animations.md) ^1.2.0 ## Recent versions - 2.20.1 (latest) — 2025-03-11 - 2.20.0 — 2025-02-03 - 2.19.1 — 2024-12-11 - 2.19.0 — 2024-12-02 - 2.18.0 — 2024-10-24 - 2.17.1 — 2024-09-23 - 2.17.0 — 2024-09-20 - 2.16.0 — 2024-07-29 - 2.15.1 — 2024-05-21 - 2.15.0 — 2024-03-25 - 2.14.0 — 2024-02-15 - 2.13.1 — 2024-01-24 - 2.13.0 — 2024-01-23 - 2.12.0 — 2023-11-20 - 2.11.2 — 2023-10-25 - … 102 more at https://npm.io/package/@shoelace-style/shoelace/versions ## README # Shoelace 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](https://twitter.com/cory_laviska). --- Documentation: [shoelace.style](https://shoelace.style) Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace) Twitter: [@shoelace_style](https://twitter.com/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](https://shoelace.style) is where you want to be. ### What are you using to build Shoelace? Components are built with [LitElement](https://lit-element.polymer-project.org/), 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](https://esbuild.github.io/). ### Forking the Repo Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies. ```bash git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace cd shoelace npm install ``` ### Developing Once you've cloned the repo, run the following command. ```bash 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. ### Building To generate a production build, run the following command. ```bash npm run build ``` ### Creating New Components To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name. ```bash 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. ### Contributing Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first. ## License Shoelace was created by [Cory LaViska](https://twitter.com/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! 🥾 --- _Source: https://npm.io/package/@shoelace-style/shoelace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._