Cory LaViskaIntroducing Web Awesome
If you’re looking for a flexible design system that helps you ship polished, production-ready UI faster, we’ve got what we think is a pretty awesome solution. Web Awesome is a free, open source component library built for developers and designers. It’s packed with customizable web components, prebuilt themes, and tools to help you go from idea to production — right in your browser.
And yep…Web Awesome is, and always will be, free and open source.
If you’ve been following along, you know that Web Awesome started as Shoelace, an open-source project I spent many a-night and weekend building before the folks at Font Awesome gave me an opportunity.
From a chance trip to Arkansas to a wildly successful Kickstarter; through a scrappy alpha to a polished product; and after three years and six incredible Snuggles…
Web Awesome is finally available to the world!
A huge thank you to Dave and Travis for believing in this vision and making it all possible!
What you’re seeing today is the result of an incredible team effort. Designers and developers, and community members have poured countless hours into making this real. Web Awesome is very much a team accomplishment, and I’m grateful to everyone who’s contributed to it!
Shout out to Lindsay, Konnor, Kelsey, Brian, and everyone else who pitched in to make Web Awesome a success! It is a pleasure and an honor to have teammates of this caliber.
What we’ve built
Over the past three years, the team has been heads down turning a forward-thinking component library for web developers into a flexible, full-featured browser-based design system with themes, patterns, and customization tools that all work together.
We’ve created 11 different themes to get you started, all with light and dark modes. To accompany them are nine beautiful color palettes to pick from. We’ve crafted an ever-expanding collection of copy-and-paste patterns across multiple categories. These aren’t just examples; they’re production-ready UI patterns you can drop right into your projects.
The theme builder is something I’m particularly excited about. Create a project and customize your theme right in the browser! Choose font pairings, customize color palettes, adjust spacing, tweak roundness, and more! You can even generate full color scales from a single color. When you’re done, save it and serve your theme instantly over the Web Awesome CDN for lightning fast load times anywhere in the world!
Pro users can purchase additional seats and invite team members to collaborate. With a single Web Awesome account, you can manage your own personal projects and projects for any other teams you’re on.
We have made significant progress with the Web Awesome Figma file and we’re ready for feedback! If you’re a designer who wants to prototype with Web Awesome components, give it a try and let us know what you think. Pro users can download the Figma file here.
We also graduated our first pro component from experimental to stable! <wa-page> is a flexible layout component that makes it easy to scaffold entire webpages with minimal markup. Headers, footers, sidebars, navigation — it handles all of it with responsive behaviors baked in.
Our Kickstarter backers unlocked 14 free stretch goal components, four of which have already shipped: Scroller, Popover, Zoomable Frame, and Intersection Observer. The remaining ten are on their way, including File Input, Toast, Video, Number Input, and more.
Thank you to everyone who backed us. Your support made this possible!
Free and open source
Web Awesome is, and always will be, free and open source. That’s non-negotiable. We believe in the open web and we believe great tools should be accessible to everyone.
That said, building and maintaining a project like this takes real resources. That’s where Web Awesome Pro comes in. Pro gives you access to additional themes, palettes, patterns, and components but, more importantly, it’s what allows us to keep working on the free version. It’s what allows us to continue to offer human support directly from the Web Awesome team.
Every Pro subscription helps fund development of the core library, so we can keep shipping updates, fixing bugs, and building new features for everyone.
And to celebrate this awesome milestone, right now you can even get 20% off Web Awesome Pro for the life of your subscription.
What’s next
Web Awesome is available to the general public now, but we’re just getting started. Here’s what’s coming next:
- More pro components: Combobox, date picker, data grid, and more are in the works
- More patterns: New categories and patterns are being added regularly
- More pro themes: Additional styles and personalities to suit more use cases
- Remaining stretch goals: Including ten more open source components
- More Figma: Continue building out the Figma file to cover more components
- Pro components on npm: We’re setting up infrastructure to get WA Pro on npm
There’s still a lot to do, but that’s what makes this exciting. We’ve built something awesome, and now we get to make it even more awesome.
Thank you!
To everyone who’s used Shoelace over the years, who’s filed issues, submitted PRs, or just sent encouraging words — thank you. This project wouldn’t exist without that community, and we’re grateful for every single one of you.
Web Awesome is the evolution of that work, and we hope it makes your life as a developer (or designer, or founder, or whoever you are) just a little bit easier.
Let’s build something awesome together!
