shoelace README

The project's README from github.com/shoelace-style/shoelace. As one markdown file: README.md.

Shoelace is now Web Awesome — visit webawesome.com

[!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.

[!TIP]
Already using Shoelace? Follow the migration guide to move to Web Awesome, or point an AI coding agent at it for a faster path.

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.

Shoelace

A forward-thinking library of web components.

Shoemakers 🥾

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.

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

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 install

Developing

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

npm run build

New Components

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

Contributing

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.

License

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

shoelace (shoelace-style/shoelace)

Searching Database…

13.8K ·GitHub
Shoelace
archived
What is this?Shoelace is a forward-thinking library of web components — ready-made UI building blocks you can drop into any web page or app. The project has since been sunset in favor of its successor, Web Awesome.
Is this tied to React, or can I use it with any framework?Neither — the components are standard web components, so they work with all frameworks or with no framework at all, and can even be loaded straight from a CDN.
How do I add it to a project?Install the published package as a dependency — via npm or a CDN — and follow the docs at shoelace.style. You do not need to build this repository just to use it.
Do I need Node or any build tooling to use it?No, not to use it as a dependency. Node 14.17 or newer is only needed if you clone the repo to build or run it locally — for example to maintain a private fork.
Is Shoelace still actively developed?No. The project is sunset and the repo is archived. The published package remains available for existing use, but issues, pull requests and new development belong on Web Awesome, not here.
What is Web Awesome?Shoelace's successor and where all active development now happens. Like Shoelace before it, it offers an even larger library of free components, plus themes, utilities, patterns and more.
What do the components support out of the box?They work with all frameworks and CDNs, are fully customizable with CSS, ship with an official dark theme, and are built with accessibility in mind.
Why is the GitHub repo archived if the package still works?Archiving is how a project marks itself read-only on GitHub — the README calls it optional but recommended. It does not affect the published package, which stays available for existing use.
What is it like to work on the source code?Components are built on LitElement, with esbuild powering the bundle. After cloning and installing dependencies, npm start spins up a dev server and opens a browser. There is no hot module reloading — browsers cannot re-register custom elements — but most changes reload the page automatically.
What are similar projects?arc-library, astryx, hyperui, fluentui, mdb-ui-kit, chakra-ui, rare-ui, material-components-web
Which topics is it in?webcomponents, ux, web-components, components, ui-library, dark-mode, design-system, accessibility, component-library, ui-components, customization, deprecated
Creator
shoelace-style
Size
19 MB
Stars
13.8K
Updated
CommitMay 14Releasev2.20.1Mar 11
Age
9y
Commits · 90 Days