Shoelace

Definition

Shoelace (now developed as Web Awesome) is an open-source library of ready-made, framework-agnostic UI Web Components — buttons, dialogs, dropdowns, form controls, and similar building blocks — built with Lit and usable in any frontend stack.

Overview

Shoelace was created to answer a specific gap: teams that wanted the convenience of a UI component library like Bootstrap or Material UI, but without being locked into that library's particular framework (usually React or a jQuery-era assumption about the DOM). Because Shoelace's components are built as standards-based Web Components using Lit, a single `<sl-button>` or `<sl-dialog>` tag works identically whether the surrounding application is built with React, Vue, Angular, Svelte, or no framework at all, since the browser itself understands custom elements natively rather than requiring the host application to run a matching framework. The library covers the common surface area expected of a general-purpose component library: buttons, form inputs, select menus, dialogs and drawers, tooltips, tabs, alerts, badges, avatars, and more, each shipped with accessible markup, keyboard navigation, and ARIA attributes handled internally so consuming teams don't have to re-implement accessibility behavior themselves. Components are styled with CSS custom properties and design tokens, making theming possible without forking the library's source, and Shoelace ships both a default light theme and a dark theme out of the box. Shoelace's creator, Cory LaViska, later relaunched and expanded the project under the name Web Awesome as a paid/open evolution of the same idea, though the original Shoelace project and its component API remain in wide use and largely compatible with the newer branding. Because its output is plain custom elements rather than framework-specific components, Shoelace is a common choice for organizations building a shared design system meant to serve multiple product teams that don't all use the same frontend framework, or for teams building framework-independent embeddable widgets.

Key Features

• Framework-agnostic Web Components usable in React, Vue, Angular, Svelte, or plain HTML
• Built on top of Lit for efficient rendering and small runtime overhead
• Covers common UI patterns: buttons, dialogs, dropdowns, form controls, tooltips, tabs
• Accessible by default, with ARIA attributes and keyboard navigation built in
• Themeable via CSS custom properties and design tokens without forking the source
• Ships with both light and dark themes out of the box
• No build step required — components can be used via a CDN script tag
• Actively evolving into the broader Web Awesome component ecosystem

Use Cases

Alternatives

History

Shoelace is an open-source, framework-agnostic library of professionally designed UI components built on Web Component standards, so its elements work in any framework — or none at all. It was created by Cory LaViska, who had built proprietary component libraries for large companies and wanted an open, standards-based alternative; a formative motivation was rebuilding a product in Vue 2 only to have Vue 3 break the component library he'd used, pushing him toward durable web standards. Released under the MIT license, Shoelace grew a large following and later joined the Font Awesome family, where it is being carried forward and rebranded as "Web Awesome."

Frequently Asked Questions

Related in Web