Web Awesome

10 design systems benchmarked with tests that fail when a component is too slow. Web Awesome opened a country selector in 137ms, only 76ms behind than the top performer. Not bad, but we can do even better! Thanks for the open tests, @denodell.bsky.social denodell.com/blog/design-...

The scariest thing in your codebase this Halloween is a feature your coding agent made up. 🙅‍♀️ <wa-fancy-card glow> Our agent skills are checked against the library on every build, so you can create faster and more consistently with AI.

The only skeleton we ship year-round. 💀 <wa-skeleton effect="sheen">

<wa-toast> used to be a Pro thing. Now it's in Core. Free toast. Butter sold separately. 🧈

Your notification bell has been sitting there doing nothing. Make it buzz. <wa-icon name="bell" animation="buzz"> Other animations include wag, jello, float, and swing, and all of them respect prefers-reduced-motion.

Web Awesome works in React, Vue, Svelte, Astro, Rails, and that .html file from 2009 you're scared to open. They're web components. They don't care about your framework drama.

Well done! 👏

The experimental badge isn't marketing fog, it means we need testers and feedback and things _could_ change between now and the final version. (Rarely happens unless we find a critical issue) Stable = battle-tested, ready to build. We label both so you don't have to guess.

A Web Awesome user created this Chrome extension that lets you inspect custom elements built with Lit 🔥 chromewebstore.google.com/detail/lit-i...

You can open and close <wa-dialog> from anywhere on the page without writing JavaScript. (The same concept works for <wa-drawer>)

Web Awesome Blazor Bindings: a community-maintained wrapper for C# devs. Great work! 👏 github.com/boldbrick/We...

More about random content over at blog.fontawesome.com/web-awesome-...

Here comes the hot stepper! 🪜 WA 3.14 is out. The experimental <wa-stepper> breaks checkout and signup into stages. We also taught <wa-combobox> (Pro) to load from your server, rewrote our AI design skill, and fixed a stack of a11y bugs. webawesome.com/docs/resourc...

Some progress with the app (ignore the sources of books). The interface is built out using @webawesome.com and data driven by tauri.app + tanstack.com for snappy data population. The OPDS implementation is strict and client-only.

The word "Drupal" is derived from the English pronunciation of the Dutch word "druppel' which means "drop", and someone just _dropped_ Web Awesome into it with this helper. Nice work! 🫡 www.drupal.org/project/wawe...

<wa-dropdown-item href="..."> works as of v3.12 Click it and it navigates like a link. A lot of folks asked for this one. Happy to deliver 🫡

Use Web Awesome's Random Content component to add some random content (in the right places) to your UI. Here are 10 places to start! blog.fontawesome.com/web-awesome-...

🚀 Web Awesome 3.13.0 shipped last week! 🏷️ New <wa-tag-input> for keywords, emails, labels, etc. 🎓 Also graduation day: accordion, OTP, pagination, known date, time input, and friends are now STABLE. Changelog: webawesome.com/docs/resourc...

Most devs have had to build a star rating component from scratch at least once. Web Awesome ships it as one tag: <wa-rating> Half-stars, custom icons, accessible out of the box. Try it here: codepen.io/editor/team/...

Tag, you're it! 🏷️ Web Awesome 3.13 is out. The new experimental <wa-tag-input> turns keywords, emails, and labels into tidy, removable tags. We also fixed up the data grid and promoted 11 components to stable. webawesome.com/docs/resourc...

Web Awesome styles your words, not just your components. Wrap your blog post, docs, or changelog in one class & every heading, list, blockquote, & code block lands on your theme's scale. A 3xs–5xl type scale handles the rest, + CSS @scope stops leaks. blog.fontawesome.com/web-awesome-...

New post 📮 I was tired of building 474 separate pages for Open Graph Images https://www.zachleat.com/web/open-graph-easy-build/

https://www.gildaconarne.de/ is #BuiltAwesome (using @webawesome.com and @fontawesome.com too!) by Stefan Frede

Building an icon catalog isn't just "pick some icons." It's: *Defining categories (actions, objects, navigation) *Setting a grid and sizing system *Naming and organizing consistently *Version-controlling the whole library Skip a step and future-you pays for it.

Icons look like the small stuff in a design system. They're not. They communicate faster than words and become some of the most recognizable parts of your brand. (We might be a little biased.) Part IV, live now: blog.fontawesome.com/art-of-i...

New around here: we're spotlighting a few things that Web Awesome does that you might've missed. First up, QR codes in one tag: <wa-qr-code value="..."></wa-qr-code> Try it live 👇 codepen.io/editor/team/...

WA 3.12 is a small but mighty release: 🎨 New components, variables, and slots added to the Figma Kit. 🔗 <wa-dropdown-item> navigation 🧰 Fixes and improvements See it all: webawesome.com/docs/resourc...

Target Multiple Classes with the Class Prefix Selector: .btn-* { … } Yes please! (Coming soon) Great post by @bram.us: www.bram.us/2026/08/20/t...

“The @fontawesome.com Icon Wizard™ Can Produce Mind-Boggling Effects”

Web Awesome ships a native.css layer that styles your actual HTML—headings, tables, forms, not just custom elements. Styles live in their own layer, so your CSS wins. Delete your !important declarations. Still on Shoelace? blog.fontawesome.com/how-does...

New on the blog: Part 3 of our design systems series is the hands-on one. Visual audits, color palettes, type scales, spacing rules — the actual bones of a system that scales. blog.fontawesome.com/how-to-b...

I've tried #WebAwesome, a framework-agnostic #UI component library based on #WebComponents. It works perfectly with the #Neux library because it can be used directly, without the need for JSX or other framework-specific approaches. Try it together in the playground: v49.livecodes.io?x=id/qtqxqig...

WA 3.11 puts everything in its place: 📊 <wa-data-grid>, sortable, filterable, and virtualized tables 🔢 <wa-pagination> + 🔡 <wa-otp-input> for codes/PINs 🍞 <wa-toast> moves from Pro to Core, notifications for everyone 🧰 Fixes and improvements See it all: webawesome.com/docs/resourc...

Part 2 of our design systems series is up: the actual components (color, type, icons, imagery, layout, UI elements) that give a design system its teeth. blog.fontawesome.com/design-s...