repository·next·Indexed 23 days ago
https://github.com/shoelace-style/webawesomeA collection of customizable, accessible, and framework-agnostic web components built with Lit and esbuild. This documentation covers the library's core components, the doc transformer pipeline for Eleventy, and the agent skill system used to provide AI tools with hand-authored references for component selection and design guidance.
The <wa-button> component is used for actions like form submission, links, and icon-only triggers. It supports various semantic variants, visual appearances, and sizes. You can also add decorations using slots or use it as a link by providing an href attribute.
<wa-button>Save</wa-button>Web Awesome introduces several new capabilities compared to Shoelace:
<wa-callout>, <wa-comparison>, <wa-popover>, <wa-page>, <wa-scroller>, <wa-zoomable-frame>, <wa-number-input>, <wa-markdown>, and <wa-intersection-observer>.dist/styles/native.css to theme plain HTML elements (like <button>, <input>, <table>) using Web Awesome design tokens.wa-stack, wa-cluster, and wa-grid (no JS required).wa-theme-default, -awesome, and -shoelace (the latter approximates the Shoelace look for easier migration).<html> element (e.g., class="wa-brand-purple") to re-skin the entire application.did-ssr and with-* slot markers to support clean server-side rendering hydration.Web Awesome Pro is a paid superset package (@awesome.me/webawesome-pro) that includes advanced components and tools:
Pro Components:
<wa-toast> and <wa-toast-item> (notification stacks)<wa-combobox> (autocomplete/multiselect)<wa-file-input> (drag-and-drop with previews)<wa-chart> and seven typed subclasses (built on Chart.js)<wa-sparkline> (inline trend visualization)Pro Extras:
active, brutalist, glossy, matter, mellow, playful, premium, tailspin)The wa-number-input component provides a numeric input field with stepper buttons for incrementing and decrementing values. It integrates with standard HTML <form> elements for submission and validation.
<wa-number-input label="Quantity" value="1" style="max-width: 260px;"></wa-number-input>Web Awesome officially supports the latest two major versions of the following popular browsers:
For the best experience, it is strongly recommended to use these supported versions. While fixes or workarounds for older browsers may be provided for critical issues at the project's discretion, the primary focus is on modern browser versions.
The <wa-popup> component is a low-level positioning utility powered by Floating UI. It is designed to position floating elements (like tooltips or dropdowns) relative to an anchor element.
Important Considerations:
<wa-tooltip> or <wa-dropdown>).slot="anchor" on an element inside the <wa-popup> to define the target element for positioning. If the anchor is a <slot>, the popup uses the first assigned element as the anchor.display: contents, as this prevents the component from calculating the correct coordinates.The wa-slider component provides a range input (scrubber) for selecting values. It supports single-thumb selection and dual-thumb range selection. It is compatible with standard <form> elements for submission and validation.
<wa-slider
label="Number of users"
hint="Limit six per team"
name="value"
value="3"
min="0"
max="6"
with-markers
with-tooltip
>
<span slot="reference">Less</span
<span slot="reference">More</span
</wa-slider>The <wa-tag> component (also known as a chip, label, pill, token, or badge) is used for feedback, filtering, or categorizing content. You can customize its semantic meaning, visual style, size, and shape using attributes.
<wa-tag>Featured</wa-tag>Web Awesome is built on standard web components, which means it is framework-agnostic and can be used with any modern web framework or library.
Specific setup guides and known limitations are available for the following frameworks:
canvas is the bounding box an icon sits in. You can choose from four mutually exclusive modes using the canvas attribute. The default mode is fixed. The canvas scales with font-size independently of the icon's internal sizing.