iiinova — where your digital self keeps evolving

Web Awesome

@webawesome.com

673 followers 20 following 115 posts

Build better with Web Awesome, the open source library of web components. Upgrade to Pro and ship websites, projects, and apps faster!

Posts Replies Media

Web Awesome @webawesome.com · 2h

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

000

Web Awesome @webawesome.com · 2h

<wa-random-content> is stable as of 3.13! Slot tips, call randomize(), or turn on autoplay. Set mode="unique" so you don’t get the same tip twice in a row. Works on static pages, too!

A screenshot of 5 lines of HTML code on the Atom One theme in dark scheme.

<wa-random-content mode="unique" autoplay>
<div>🙈</div>
<div>🙉</div>
<div>🙊</div>
</wa-random-content>

Web Awesome @webawesome.com · 29/09/2026

<wa-combobox> can pull options from your server now! Set a dataSource callback, get debounced fetch + loading/error/empty slots, and improve performance by not shipping thousands of options in your DOM.

Web Awesome @webawesome.com · 28/09/2026

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...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Reposted by Web Awesome

Jacky Alciné @jacky.wtf · 25/09/2026

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.

Web Awesome @webawesome.com · 25/09/2026

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...

Client Challenge

Web Awesome @webawesome.com · 24/09/2026

Don't let your agent make guesses about your component library. Agent skills help them get it right the first time. Web Awesome ships two: - webawesome for using components - webawesome-design for designing with WA

Web Awesome @webawesome.com · 23/09/2026

Six separate inputs for a verification code? Nah. <wa-otp-input> acts as one form control and supports paste and constraint validation. Web Awesome and done.

Screenshot of the OTP input from Web Awesome.

Web Awesome @webawesome.com · 22/09/2026

<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 🫡

<wa-dropdown> <wa-button slot="trigger" with-caret>Resources</wa-button>

<wa-dropdown-item href="/docs/"> Documentation </wa-dropdown-item>

<wa-dropdown-item href="https://github.com/shoelace-style/webawesome" target="_blank" > GitHub </wa-dropdown-item> </wa-dropdown>

Web Awesome @webawesome.com · 21/09/2026

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-...

blog.fontawesome.com

Random Content, On Purpose

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Web Awesome @webawesome.com · 21/09/2026

🚀 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...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 17/09/2026

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/...

The Web Awesome Cover Image

Web Awesome @webawesome.com · 16/09/2026

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...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 09/09/2026

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-...

blog.fontawesome.com

Your Design System Should Style Your Words, Too

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Reposted by Web Awesome

Zach Leatherman @zachleat.com · 09/09/2026

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

I was tired of building 474 separate pages for Open Graph Images—zachleat.com

A post by Zach Leatherman (zachleat)

Reposted by Web Awesome

Build Awesome (11ty) @11ty.dev · 08/09/2026

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

gildaconarne.de

Der Politikpodcast

Reposted by Web Awesome

Font Awesome @fontawesome.com · 31/08/2026

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.

Web Awesome @webawesome.com · 28/08/2026

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...

Illustration of ornate purple picture frames on a pink background, each showing a different Font Awesome icon. Most as simple purple line icons, with a larger center frame featuring colorful heart, music note, camera, and lightning bolt icons.

Web Awesome @webawesome.com · 24/08/2026

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/...

Web Awesome component spotlight: a QR code generated from a single tag, shown with the <wa-qr-code> code snippet. "One tag, a working QR code."

Web Awesome @webawesome.com · 21/08/2026

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...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Reposted by Web Awesome

Cory LaViska @cory.laviska.com · 19/08/2026

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 Future of CSS: Target Multiple Classes with the Class Prefix Selector

To target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a n...

Reposted by Web Awesome

Noah Jacobus @jabron.us · 20/08/2026

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

fontawesome.com

Creation #128 | Font Awesome Icon Wizard Gallery

Creation #128, conjured up with the Font Awesome Icon Wizard. Browse the gallery and make one of your own at fontawesome.com/icons/gallery.

Web Awesome @webawesome.com · 17/08/2026

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...

blog.fontawesome.com

How Does Web Awesome Stack Up Against Shoelace?

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Web Awesome @webawesome.com · 13/08/2026

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...

blog.fontawesome.com

How to Build and Style Your Visual Design System [Part III]

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Reposted by Web Awesome

meefik @meefik.dev · 02/08/2026

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...

Web Awesome @webawesome.com · 30/07/2026

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...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 23/07/2026

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...

blog.fontawesome.com

The Building Blocks of a Visual Design System [Part II]

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Web Awesome @webawesome.com · 30/06/2026

WA 3.10 brings you: 🍫 <wa-random-content> to randomly display one (or more!) slotted elements 👾 Support for FA 7.3 in <wa-icon>, including new Pixel, Mosaic, and Vellum Pro+ packs 🧰 A healthy set of fixes and improvements See it all: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 26/06/2026

We noticed a sceptical vibe shift from the Web Awesome community. So, we took an honest look at why, and we didn't love what we found. Read the blog for the full story, and what we've already changed. blog.fontawesome.com/staying-...

blog.fontawesome.com

Staying True to Open Source: An Honest Reflection

News and information from Font Awesome – the internet’s favorite icon set; mixed with musings and nerdery from the team behind it.

Web Awesome @webawesome.com · 18/06/2026

🤖 We've added a new webawesome-design skill to help AI agents build better UI with Web Awesome. 🤖 Get the new skill and all of the latest hotness like <wa-checkbox-group> in WA 3.9: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 12/06/2026

They said it couldn't be done. We did it anyway. SSR is available in Web Awesome 3.8. We're calling it experimental, but it won't stay that way for long.

Screenshot of the new Try SSR switch from the website

Web Awesome @webawesome.com · 05/06/2026

⏰ It's about time! ⏰ We know you've been waiting for a date, so WA 3.8 is hitting the town with: 📅 <wa-date-picker> and <wa-date-input> 🎂 <wa-known-date> ⌚️ <wa-time-input> 🪗 <wa-accordion> ⚙️ SSR support For all of the updates you won't want to miss: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 21/05/2026

👀

Web Awesome @webawesome.com · 19/05/2026

We made it easier for you to find exactly the component you need on our new components page.

screenshot of the components page linked in the next tweet.

Web Awesome @webawesome.com · 18/05/2026

UX challenge: can this section of the Print dialog be improved? What would you do differently?

screenshot of the pages section of the print dialog.

000

Web Awesome @webawesome.com · 18/05/2026

We've made it as easy as copy + paste.

screenshot of the Web Awesome homepage showing the section to copy and paste to install.

Web Awesome @webawesome.com · 12/05/2026

🎶 <wa-video> killed the radio star 🎶 WA 3.7 makes its debut with: 📽️ New <wa-video> and <wa-video-playlist> 📋 Support for custom triggers in <wa-copy-button> 👇 Improved design tokens for button interactions 🎬 New wa-text-wrap-* utilities See it all: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 30/04/2026

🎓 It's graduation day for many of our components! Charts, combobox, toast, and more have been upgraded from experimental to stable and are ready to take the stage. 🎊 Plus, new xs and xl options for size="" and a ton of fixes and improvements. Check out WA 3.6: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 28/04/2026

👀

Web Awesome @webawesome.com · 03/04/2026

🎊 Big changes in our 3.5 release today! Web Awesome is now available on our public CDN. No signup required. Just copy, paste, and go. And, the icing on the cake 🍰: <wa-page> is now free for everyone. No Pro sub required. Get started at webawesome.com. Head to our changelog for everything in 3.5.

Build better with Web Awesome, the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

Web Awesome @webawesome.com · 25/03/2026

💐 We'll take potpourri for 400, please. WA 3.4 includes over two dozen fixes and improvements, including: 🍱 Many new attributes for <wa-combobox> ⚖️ More space and font-size tokens 🖼️ Theme and color scheme syncing in <wa-zoomable-frame> See the full list: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 18/03/2026

👀

Web Awesome @webawesome.com · 04/03/2026

🎂 Web Awesome 3.3 is fresh out of the oven with: 🥧 *New* charts like <wa-pie-chart> (Pro) 🍞 *New* <wa-toast> (Pro) 🗒️ *New* recipes for app pages in our pattern library ✏️ Support for FA 7.2 (including Graphite) in <wa-icon> 🧁 Fixes and bite-sized improvements Dig in: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Web Awesome @webawesome.com · 02/03/2026

👀

Web Awesome @webawesome.com · 05/02/2026

🗞️ Extra! Extra! Web Awesome v3.2 is here with: 🗃️ <wa-file-input> (Pro) #️⃣ <wa-number-input> (Free) 📈 <wa-sparkline> (Pro) 🤖 AI boosts with llms.txt and Agent Skills 🤸 FA 7.1 and animation support in <wa-icon> 🐛 A hefty list of fixes and improvements Get the scoop: webawesome.com/docs/resourc...

Changelog | Web Awesome

Changes to each version of the project are documented here.

Reposted by Web Awesome

Font Awesome @fontawesome.com · 03/02/2026

Reposted by Web Awesome

Font Awesome @fontawesome.com · 20/11/2025

What’s better than a full-featured Figma file? A future where you don’t need one. 😎 Lindsay + Cory dream big in the latest Podcast Awesome: 🧩 Figma theming plugins 🧪 Prototyping with actual code Designers: meet your future-friendly toolbox → youtu.be/MiNQNUFlrcU?si=yS1mV...

Web Awesome @webawesome.com · 19/11/2025

Final hours: 20% off for the lifetime of your Web Awesome Pro subscription. But it ends tonight, so last chance to lock it in! 👉 webawesome.com/?utm_source=bl...

Web Awesome @webawesome.com · 17/11/2025

⏳ Heyo! Time's running out to get 20% off for life on Web Awesome Pro. This once-in-a-lifetime deal ends November 19. 👉 webawesome.com/?utm_source=bl...

Build better with Web Awesome, the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

Web Awesome @webawesome.com · 14/11/2025

⚡ From concept to current — Web Awesome is ready to roll. ⚡ Build and design faster than ever. 20% off for life ends Nov 19 — final lifetime deal 👉 webawesome.com?utm_source=b... #WebAwesome #Frontend #OpenWeb #LifetimeDeal

Build better with Web Awesome, the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.