Web Awesome

Build something hassle-free, framework-agnostic, and uniquely yours!

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, web-standards-based, and framework-agnostic UI components.

Start for Free

Upgrade to Pro

v3.2.1

Our latest release!

50+ Components 100+ Patterns 11 Themes

Web Standards-Based Readable, Durable, and Framework-Friendly

We're committed to standards-driven design using proven, native web technologies. That's why Web Awesome is built with incredibly readable, utterly stable web components. Web Awesome just works. It needs nothing more than HTML, CSS, and JavaScript, but works well with any of your preferred frameworks.

U.S.S. Enterprise Transfer Request

Security

<wa-card>
  <div slot="header" class="wa-split">
    <h3 class="wa-heading-l wa-stack wa-gap-2xs">
      <span class="brand-font wa-caption-s">
        <wa-icon family="duotone" name="starship"></wa-icon>
        U.S.S. Enterprise
      </span>
      Transfer Request
    </h3>
    <span class="wa-visually-hidden">Department:</span>
    <wa-badge appearance="accent" variant="brand">Security</wa-badge>
  </div>
  <form class="wa-stack">
    <wa-input name="email" type="email" label="Subspace Address" placeholder="e.g. [email protected]" required>
      <wa-icon slot="end" variant="regular" name="envelope"></wa-icon>
    </wa-input>
    <wa-select label="Species" with-clear required>
      <wa-icon slot="start" family="duotone" name="user-visor"></wa-icon>
      <wa-option value="human">Human</wa-option>
      <wa-option value="vulcan">Vulcan</wa-option>
      <wa-option value="klingon">Klingon</wa-option>
      <wa-option value="other">Other</wa-option>
    </wa-select>
    <wa-radio-group
      label="Duty Preference"
      orientation="horizontal"
      name="preference"
    >
      <wa-radio appearance="button" value="away">Away Teams</wa-radio>
      <wa-radio appearance="button" value="brig">Brig</wa-radio>
      <wa-radio appearance="button" value="holodeck">Holodeck</wa-radio>
      <wa-radio appearance="button" value="tenforward">Ten Forward</wa-radio>
    </wa-radio-group>
    <wa-checkbox required>I acknowledge what wearing a “red shirt” means</wa-checkbox>
    <wa-divider></wa-divider>
    <div class="wa-grid">
      <wa-button type="button" appearance="outlined" variant="neutral">
        Don't Engage
      </wa-button>
      <wa-button type="submit" variant="brand">
        Make It So
        <wa-icon slot="end" variant="regular" name="arrow-right"></wa-icon>
      </wa-button>
    </div>
  </form>
</wa-card>

All gain…

Human-friendly markup and well-scoped styling

Standards-based code that stands the test of time

Just the source and supporting code needed for the job

Use every single component across all frameworks

And no pain…

Inline styling, class name trains, and DOMs of Doom

Non-standard code or syntax that breaks in the future

Excess tooling, piles of packages, and third-party bloat

Rebuilding all components for every single framework

Use a Dash or a Whole Dashboard's Worth

Drop a set of tabs, color picker, or a carousel into an existing project — interaction, style scoping, and mischief managed.

Or start from scratch with page layouts and patterns.

Framework-Free, but Still Friendly

Web Awesome doesn't lock you into a single framework. But if you have a favorite to help you “lock in” and build with, take Web Awesome easily with you.

Works Awesomely with Angular, React, Svelte, and Vue.

Awesome Alongside AI Agents

Working with AI agents? Web Awesome comes primed with tools like llms.txt and Agent Skills, so your pairing sessions are informed and intelligent.

Write awesome code… with minimal vibes.

UI Components + Patterns Off-the-Shelf Speed and Stability

Move fast and don't break things with our comprehensive library of components and patterns that are ready to use out of the box. No reinventing any wheels here — hit the road instead and build your ideas faster.

50+ Components

30+ Patterns

Check out the roadmap for components and patterns

Parenting

18/24 hrs

Dishes

52/100 plates

Laundry

1/4 loads

Your Cart

Initiate Saber $179.99

Standard Hilt + Green Kyber Add-on

Repair Droid $3,049.99

R-series (Republic Era Model)

Subtotal $3,229.98

Checkout

Shipping and taxes calculated at checkout.

Second Breakfast 19 Items

Share with Bilbo

Wait until elevensies

Cancel order

Manage Your Order

<div class="fellowship">
  <p class="ring-bearer">Frodo carries the <span id="one-ring">One Ring</span></p>
  <ul class="companions">
    <li data-race="wizard">Gandalf the Grey</li>
    <li data-race="elf">Legolas</li>
    <li data-race="dwarf">Gimli</li>
  </ul>
</div>

This is the way.

Follow the Creed

It's a trap!

Take Evasive Action

That's no moon.

Turn Around

Scoundrel Happy Hour!

Chalmun's Spaceport Cantina

4.1 (419 reviews)

Bar

Gastropub

Local Fare

Mos Eisley, Tatooine

Tell Me the Odds

Allow protocol droids to inform you of probabilities, such as the success rate of navigating an asteroid field. We recommend setting this to "Never."

Don't touch the cowbell! It's at perfection!

Amount: $5,610.00

Paid

You got a sweet Bombadeal!

: Tom Bombadil

: Paid with copper pennies

Download Receipt

Migs Mayfeld

Admin

Remorseful Imperial Sharpshooter

Connect on LukedIn

The Stone Troll (Shire Remix) Samwise G + Gandalf the Grey

More Options

1:01 -1:58

Cake

Death

Decks

You haven't created any decks yet. Get started by selecting an aspect that matches your play style.

Vigilance

Protect, defend, and restore as you ready heavy-hitters.

Command

Build imposing armies and stockpile resources.

Aggression

Relentlessly deal damage and apply pressure to your opponent.

Cunning

Disrupt and frustrate your opponent with dastardly tricks.

Roll for Initiative and a Deck!

Accessibility

Build something that everyone can use — by design and default

Usability

Interaction and affordances that are common sense and commonplace.

Sensible Styling

Buttoned-up styles that are browser-bulletproof.

Hard Things Handled!

Popular page layouts, patterns, and interactions already built out for you.

Put the “U” in UI! Theming that Makes Your Project Feel Custom, Not Cookie-Cutter

Create a cohesive design system that makes your project feel like yours! Whether you get a jump start from an official theme or start from scratch, you can customize every aspect of your project from colors and typography to spacing and rounding.

Mix. Match. Make the styling yours.

Use a theming API complete with a modern CSS-based set of styling knobs…

Effortlessly Push the Right Pixels with our Theme Builder

Quickly see your design choices in action — then ship them live in seconds.

View Free Themes

Get Pro Themes + Tools with Pro!

In our roots and :root{} Proudly Open Source

View on GitHub

Star on GitHub

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

Always Free
Web Awesome will always have a free and open source version. Like the Force, use it wherever and however you'd like – but for good, please.

Community-Driven
Community is at the heart of Web Awesome. We welcome anyone to chat, share, and make things more awesome.

No Shenanigans
If you want Web Awesome Pro-only features, subscribe to Pro. If not, we won't sell you anything or sell your data.

Help Add More Awesome!

Thanks to Web Awesome Kickstarter backers and folks who pre-ordered a Pro subscription, we're able to continue building and improving Web Awesome.

Along with a great sense of pride, a Pro subscription also gets you…

Pro Components
Responsive Layout Tools
Ever-Growing Pattern Library
Unlimited Hosted Projects
Pre-Built Pro Themes
Pro Theme Builder
Pro Color Tools
Official Figma Design Kit
WA Pro Perpetual License
Actual Human™ Support

Upgrade to Pro

and support the project!

GitHub

Report bugs and ask for help with GitHub issues and discussions.

Discord

Share your work, ask questions, and explore ideas with other awesome folks.

Write Us!

Have a love letter? Hate mail? Either way, we'd love to hear from you, so drop us a line!

The “We” in Web Awesome Join the Community

Whether you're a developer, designer, or budding tech nerd, we want you to be a part of the conversation.

Documentation

Resources

Community

Web Awesome

Build something hassle-free, framework-agnostic, and uniquely yours!

Web Standards-Based Readable, Durable, and Framework-Friendly

U.S.S. Enterprise Transfer Request

All gain…

And no pain…

Use a Dash or a Whole Dashboard's Worth

Framework-Free, but Still Friendly

Awesome Alongside AI Agents

UI Components + Patterns Off-the-Shelf Speed and Stability

Parenting

Dishes

Laundry

Your Cart

Chalmun's Spaceport Cantina

Tell Me the Odds

Migs Mayfeld

Decks

Accessibility

Usability

Sensible Styling

Hard Things Handled!

Put the “U” in UI! Theming that Makes Your Project Feel Custom, Not Cookie-Cutter

Mix. Match. Make the styling yours.

Effortlessly Push the Right Pixels with our Theme Builder

In our roots and :root{} Proudly Open Source

Help Add More Awesome!

Along with a great sense of pride, a Pro subscription also gets you…

The “We” in Web Awesome Join the Community

Documentation

Resources

Community

Web Awesome

Build something hassle-free, framework-agnostic, and uniquely yours!

Web Standards-Based Readable, Durable, and Framework-Friendly

U.S.S. Enterprise Transfer Request

All gain…

And no pain…

Use a Dash or a Whole Dashboard's Worth

Framework-Free, but Still Friendly

Awesome Alongside AI Agents

UI Components + Patterns Off-the-Shelf Speed and Stability

Accessibility

Usability

Sensible Styling

Hard Things Handled!

Put the “U” in UI! Theming that Makes Your Project Feel Custom, Not Cookie-Cutter

Mix. Match. Make the styling yours.

Effortlessly Push the Right Pixels with our Theme Builder

In our roots and :root{} Proudly Open Source

Help Add More Awesome!

Along with a great sense of pride, a Pro subscription also gets you…

The “We” in Web Awesome Join the Community

We Have Cookies…