Web Awesome

4 min read Original article ↗

Build something universal, accessible, and uniquely yours!

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

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

Department:

Security
Human Vulcan Klingon Other Away Teams Brig Holodeck Ten Forward I acknowledge what wearing a “red shirt” means

Don't Engage Make It So 

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

Full of…

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

Free from…

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

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.

Usability

Interaction and affordances that are common sense and commonplace.

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.

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…

Upgrade to Pro

and support the project!