Shoelace
Framework-agnostic components as web components.
Shoelace is a set of standard custom elements that work in any framework or in plain HTML, styled through CSS custom properties. It was the reference implementation for serious web components, and it is now succeeded by Web Awesome.
Read this before you install
Shoelace's own documentation now directs new work to Web Awesome, which is built by the same team with a larger free library and where ongoing issues and features are handled. Shoelace remains available and MIT-licensed, but it is no longer where the work happens.
Starting a new project on Shoelace in 2026 means starting on a superseded library. Existing projects are not in danger, and a migration path is documented.
At a glance
| Install | CDN autoloader, or npm install @shoelace-style/shoelace |
| Standard | native custom elements, no framework |
| Styling | CSS custom properties and ::part() |
| Status | superseded by Web Awesome |
| License | MIT |
What the markup looks like
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2/cdn/themes/light.css">
<sl-button variant="primary" size="medium">Save changes</sl-button>
<sl-dialog label="Rename project">…</sl-dialog>
Because these are real custom elements, the same markup works in React, Vue, Angular, a Rails template or a static HTML file, and it keeps working when the surrounding framework is replaced.
Choose it if
- You have an existing Shoelace codebase. There is no urgency to move.
- You need components that outlive a framework decision and want a proven implementation.
Look elsewhere if
- You are starting fresh. Look at Web Awesome first, then come back if its licensing does not suit you.