@webawesomer

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

webawesome.com/
Joined March 2024
  • Tweets145
  • Following3
  • Followers515
36Media
"Make it look nice" is not a design system. Our Agent Skills keep things looking the way they're supposed to. 👌
Screenshot of the skills documentation showing both skills.

ALT Screenshot of the skills documentation showing both skills.

1
48
Docs: webawesome.com/docs/ai/agent…

Agent Skills | Web Awesome

Two complementary Agent Skills that help AI tools work with Web Awesome — components and design.

webawesome.com
22
Nobody should have to click "previous month" 400 times to enter their birthday. <wa-known-date> gives you day, month, and year. Three plain inputs that submit as a single form control with a clean ISO date. Your users' thumbs say thanks.
2
4
166
Get it here: webawesome.com/docs/componen…

Known Date | Web Awesome

Known dates let users enter dates they already know - birthdays, expirations, document dates - through three separate day, month, and year fields shown in the locale's natural order.

webawesome.com
1
53
Your plain <button> showed up to the party in browser defaults again. Web Awesome's native.css styles the HTML you already wrote: buttons, inputs, selects, tables, dialogs, details. It all matches your theme. Nobody has to know. 🤫
1
109
Fact: you can use Native Styles with any Web Awesome theme and the components are optional. Learn more at webawesome.com/docs/utilitie…

Native Styles | Web Awesome

Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.

webawesome.com
1
45
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.
83
Well done! 👏
Font Awesome
@fontawesomeOct 15
Another site in the Awesome-verse! ✨ lgs1920.fr/registration/ is #BuiltAwesome with Font Awesome, Web Awesome, and Build Awesome by Christian Denat @LGS1920Studio.

LGS1920 Studio launch registration — LGS1920 Site

Register to receive launch updates and learn how to stay connected afterwards.

lgs1920.fr
1
1
157
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.
Screenshot of the stable/experimental table in the changelog

ALT Screenshot of the stable/experimental table in the changelog

81
A Web Awesome user created this Chrome extension that lets you inspect custom elements built with Lit 🔥 chromewebstore.google.com/de…

Lit Inspector - Chrome Web Store

Inspect Lit web components on any page, production builds included: component tree, properties, updates and a timeline.

chromewebstore.google.com
2
132
You can open and close <wa-dialog> from anywhere on the page without writing JavaScript. (The same concept works for <wa-drawer>)
A screenshot of 10 lines of HTML code on the Atom One theme in dark scheme. <wa-button data-dialog="open checkout"> Checkout </wa-button> <wa-dialog id="checkout" label="Checkout"> … <wa-button slot="footer" data-dialog="close"> Done </wa-button> </wa-dialog>

ALT A screenshot of 10 lines of HTML code on the Atom One theme in dark scheme. <wa-button data-dialog="open checkout"> Checkout </wa-button> <wa-dialog id="checkout" label="Checkout"> … <wa-button slot="footer" data-dialog="close"> Done </wa-button> </wa-dialog>

1
2
120
Web Awesome Blazor Bindings: a community-maintained wrapper for C# devs. Great work! 👏 github.com/boldbrick/WebAwes…

GitHub - boldbrick/WebAwesome-Blazor: Web Awesome bindings for Blazor

Web Awesome bindings for Blazor. Contribute to boldbrick/WebAwesome-Blazor development by creating an account on GitHub.

github.com
2
2
132
<wa-otp-input> can group passcode segments for you using the format attribute. Just add `#` to represent a character. Everything else is decoration.
1
4
179
More in the docs: webawesome.com/docs/componen…
55
More on random content over at More about random content over at blog.fontawesome.com/web-awe…

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.

blog.fontawesome.com
Web Awesome@webawesomerSep 30
<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>

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

2
150
<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>

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

1
1
3
299
View the docs webawesome.com/docs/componen…
49
<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.
1
3
202
More info in the docs: webawesome.com/docs/componen…

Combobox | Web Awesome

Comboboxes combine a text input with a listbox, allowing users to filter and select from predefined options or enter custom values.

webawesome.com
47
Web Awesome 3.14 is here! 🪜 Meet the new experimental <wa-stepper> for checkout, signup, and setup flows. Comboboxes can now load options from your server (Pro), and the AI design skill got a rewrite. webawesome.com/docs/resource…

Changelog | Web Awesome

Changes to each version of the project are documented here.

webawesome.com
1
3
177
Load more