explaingit

shoelace-style/shoelace

★ 13,866TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A now-sunset library of accessible, framework-agnostic web component UI elements, buttons, dropdowns, dialogs, and more, that work with React, Vue, Angular, or plain HTML, the successor project is Web Awesome.

Mindmap

mindmap
  root((repo))
    What it does
      UI component library
      Web components standard
      Framework agnostic
    Components
      Buttons and inputs
      Dropdowns
      Dialogs
    Features
      Dark theme built in
      Accessibility ready
      CSS customizable
    Status
      Sunset
      Web Awesome successor
    Tech Stack
      TypeScript
      Web Components
      CSS
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add accessible, pre-styled buttons, dropdowns, and dialog boxes to a plain HTML page without installing any JavaScript framework.

USE CASE 2

Drop Shoelace web components into an existing React or Vue project without framework-specific wrapper libraries.

USE CASE 3

Fork the Shoelace codebase as a starting point for building a custom branded UI component library.

Tech stack

TypeScriptWeb ComponentsCSSNode.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min

Project is sunset, new features and bug fixes are in the Web Awesome successor project.

Open source under the MIT license, use freely for any purpose including commercial projects, as long as you retain the copyright notice.

In plain English

Shoelace was a collection of pre-built user interface components for the web. Components are things like buttons, dropdowns, dialogs, form inputs, and other building blocks that developers commonly need when building websites or apps. The idea behind Shoelace was to provide these pieces as standard web components, a browser-native format that works across different JavaScript frameworks rather than being tied to any one in particular. Because it used the web components standard, Shoelace could be dropped into projects using React, Vue, Angular, or any other framework, or even into a plain HTML page with no framework at all. Styling was handled through standard CSS, including support for an official dark theme out of the box. The library was also designed with accessibility in mind, meaning the components were built to work with screen readers and keyboard navigation. Shoelace is no longer actively developed. The project has been sunset by its creators in favor of a successor called Web Awesome, which the same team is now maintaining. The Shoelace code remains available under the MIT open-source license so existing projects using it can continue to do so, but no new features or bug fixes are being developed in this repository. The team asks that issues and contributions be directed to the Web Awesome project instead. If you are starting a new project and were considering Shoelace, the README recommends looking at Web Awesome, which the authors describe as offering a larger set of components along with themes, utilities, and patterns. For anyone who needs to run or fork the existing Shoelace codebase for historical or archival reasons, it requires Node.js version 14.17 or newer and uses standard npm commands to install, develop, and build.

Copy-paste prompts

Prompt 1
Show me how to add a Shoelace dropdown menu and a modal dialog to a plain HTML page using a CDN link, and toggle between light and dark themes with a button click.
Prompt 2
I'm building a React app. Write the code to use Shoelace web components in React, including listening to a custom event emitted by a Shoelace dialog when it closes.
Prompt 3
How do I customize Shoelace's button colors, border radius, and font using CSS custom properties to match my brand design system?
Prompt 4
Walk me through forking Shoelace, replacing the default color tokens with my brand palette, and building the package with npm for use in my project.
Open on GitHub → Explain another repo

← shoelace-style on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.