Web Awesome

The Web's Open Source Design System

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

Get Started

Components

View Source Code

Version 3.8.0 50+ Components 20+ Utilities 10+ Themes

<!-- Web Awesome -->
<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/themes/default.css">
<script type="module" src="https://ka-f.webawesome.com/[email protected]/webawesome.loader.js"></script>

<!-- Optional CSS reset ("Native Styles") -->
<link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/native.css">

Copy & Paste to get started! Just throw this into your <head> tag and build!

Install via npm Download With Frameworks Help & Support

All You Need to Make Something Awesome
What's Included in Web Awesome?

Link to this section

UI Components

50+ accessible components built on web standards for use anywhere in your stack.

Theming

Crafted themes plus a theming API for light and dark mode, palettes, and branding.

CSS Utilities

Utility classes for layout, spacing, typography, and other common styling needs.

Page Layouts

Create common page layouts with a dedicated component for structure and navigation.

Native Styles

Optional styles that polish native HTML elements so they match your components visually.

Localization

Localization out of the box, with translations and patterns for 30+ languages.

AI Agent Support

Skills and docs that help your AI coding assistant use Web Awesome effectively.

Design Patterns

Pro

This requires access to Web Awesome Pro

Grab-and-go patterns for common site, app, and online product workflows.

Figma Design Kit

Pro

This requires access to Web Awesome Pro

Figma components and styles aligned with what you ship in production code.

Put the “PWN” in Components
Simple Syntax. Powerful Components.

Link to this section

Whoaaa, we're half way there…

This is the way.

Follow the Creed

That's no moon.

Turn Around

Jedi 0

Sith 2

Chosen 1

Episodes 6

<!-- progress bar -->
<div class="wa-stack">
  <h4 class="wa-heading-s">Whoaaa, we're half way there…</h4>

  <wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
</div>

<!-- callouts -->
<wa-callout variant="success" appearance="filled">
  <wa-icon
    slot="icon"
    family="duotone"
    variant="regular"
    name="user-bounty-hunter"
    style="font-size: var(--wa-font-size-l);"
  ></wa-icon>

  <div class="wa-split">
    <span>This is the way.</span>
    <wa-button variant="success" size="s">
      Follow the Creed
    </wa-button>
  </div>
</wa-callout>

<wa-callout variant="warning" appearance="filled">
  <wa-icon
    slot="icon"
    family="duotone"
    variant="regular"
    name="space-station-moon"
    style="font-size: var(--wa-font-size-l);"
  ></wa-icon>

  <div class="wa-split">
    <span>That's no moon.</span>
    <wa-button variant="warning" size="s">
      Turn Around
    </wa-button>
  </div>
</wa-callout>

<!-- badges -->
<wa-button appearance="filled" size="s">
  Jedi
  <wa-badge pill variant="success">0</wa-badge>
</wa-button>

<wa-button appearance="filled" size="s">
  Sith
  <wa-badge pill variant="danger" attention="pulse">2</wa-badge>
</wa-button>

<wa-button appearance="filled" size="s">
  Chosen
  <wa-badge pill variant="neutral">1</wa-badge>
</wa-button>

<wa-button appearance="filled" size="s">
  Episodes
  <wa-badge pill variant="neutral" attention="bounce">6</wa-badge>
</wa-button>

<!-- line chart -->
<wa-line-chart
  id="line-the-beef"
  label="The Beef's Beefs + Beefs"
  description="Avg. sandos per day, cousin fights, and Fak brothers on payroll."
  x-label="Month"
  y-label="Count"
  without-animation
>
</wa-line-chart>

<script type="module">
  customElements.whenDefined('wa-line-chart').then(() => {
    const chart = document.querySelector('#line-the-beef');

    chart.config = {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          { label: 'Sandos per Day', data: [14, 17, 16, 18, 21, 19] },
          { label: 'Cousin Fights', data: [4, 3, 2, 7, 5, 4] },
          { label: 'Fak Brothers', data: [1, 1, 2, 2, 3, 4] },
        ],
      },
    };
  });
</script>

Stop!

Hammer Time!

Can't Touch This!

Quit

Undo

Redo

Bold

Italic

Underline

Align Left

Align Center

Align Right

Ask Clippy

Trash It

Export

Documents PDF

Word Document

Spreadsheets Excel Formats Excel (.xlsx)

Excel 97-2003 (.xls)

CSV (.csv)

Other Formats OpenDocument (.ods)

Tab-separated (.tsv)

JSON (.json)

Apple Numbers

Options Compress files

Include metadata

Password protect

Save

Save as…

Save all

Set a Color Label

<!-- buttons -->
<wa-button variant="danger">
  <wa-icon slot="start" name="hand"></wa-icon>
  Stop!
</wa-button>

<wa-button>
  <wa-icon slot="start" name="hammer"></wa-icon>
  Hammer Time!
</wa-button>

<wa-button variant="neutral" appearance="outlined" disabled>
  <wa-icon slot="end" name="ban"></wa-icon>
  Can't Touch This!
</wa-button>

<wa-button variant="brand" appearance="filled" pill>
  <wa-icon slot="start" name="hand-peace"></wa-icon>
  Quit
</wa-button>

<!-- button groups -->
<wa-button-group label="History">
  <wa-button appearance="filled" id="undo-button">
    <wa-icon name="undo" variant="solid" label="Undo"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="redo-button">
    <wa-icon name="redo" variant="solid" label="Redo"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Formatting">
  <wa-button appearance="filled" id="button-bold">
    <wa-icon name="bold" variant="solid" label="Bold"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-italic">
    <wa-icon name="italic" variant="solid" label="Italic"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-underline">
    <wa-icon name="underline" variant="solid" label="Underline"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Alignment">
  <wa-button appearance="filled" id="button-align-left">
    <wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-align-center">
    <wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-align-right">
    <wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Other">
  <wa-button appearance="filled" id="button-ask-clippy">
    <wa-icon name="paperclip" variant="solid" label="Ask Clippy"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-trash-it">
    <wa-icon name="trash-can" variant="solid" label="Trash It"></wa-icon>
  </wa-button>
</wa-button-group>

<!-- dropdowns -->
<wa-dropdown>
  <wa-button appearance="filled" slot="trigger" with-caret>Export</wa-button>

  <wa-dropdown-item>
    Documents
    <wa-dropdown-item slot="submenu" value="pdf">PDF</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" value="docx">Word Document</wa-dropdown-item>
  </wa-dropdown-item>

  <wa-dropdown-item>
    Spreadsheets
    <wa-dropdown-item slot="submenu">
      Excel Formats
      <wa-dropdown-item slot="submenu" value="xlsx">Excel (.xlsx)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="xls">Excel 97-2003 (.xls)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="csv">CSV (.csv)</wa-dropdown-item>
    </wa-dropdown-item>

    <wa-dropdown-item slot="submenu">
      Other Formats
      <wa-dropdown-item slot="submenu" value="ods">OpenDocument (.ods)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="tsv">Tab-separated (.tsv)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="json">JSON (.json)</wa-dropdown-item>
    </wa-dropdown-item>

    <wa-dropdown-item slot="submenu" value="numbers">Apple Numbers</wa-dropdown-item>
  </wa-dropdown-item>

  <wa-divider></wa-divider>

  <wa-dropdown-item>
    Options
    <wa-dropdown-item slot="submenu" type="checkbox" value="compress">Compress files</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" type="checkbox" checked value="metadata">Include metadata</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" type="checkbox" value="password">Password protect</wa-dropdown-item>
  </wa-dropdown-item>
</wa-dropdown>

<wa-button-group label="Example Save Button">
  <wa-button appearance="filled" variant="brand">Save</wa-button>

  <wa-dropdown placement="bottom-end">
    <wa-button appearance="filled" slot="trigger" variant="brand">
      <wa-icon name="chevron-down" label="More options"></wa-icon>
    </wa-button>

    <wa-dropdown-item>Save</wa-dropdown-item>

    <wa-dropdown-item>Save as…</wa-dropdown-item>

    <wa-dropdown-item>Save all</wa-dropdown-item>
  </wa-dropdown>
</wa-button-group>

<!-- slider -->
<wa-slider label="Scale" name="scale" min="0" max="100" value="50" size="s" with-tooltip></wa-slider>

<!-- color picker -->
<wa-color-picker id="example-color-picker" size="s" value="f46a45" opacity>
  <span slot="label" class="wa-visually-hidden">Set a Color Label</span>
</wa-color-picker>

<wa-tooltip for="example-color-picker">Set a Color Label</wa-tooltip>

How was your chariot ride, Gaius?

Share with the driver?

<!-- form -->
<form class="wa-stack wa-gap-l">
  <wa-input name="email" type="email" label="Email" placeholder="[email protected]" required>
    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
  </wa-input>

  <wa-input type="password" label="Password" placeholder="********" password-toggle required>
    <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
  </wa-input>

  <wa-checkbox>Preserve my essence + login for next time</wa-checkbox>

  <div class="wa-flank:end wa-gap-2xl">
    <wa-button type="submit" variant="brand">
      Log In
      <wa-icon slot="end" name="arrow-right"></wa-icon>
    </wa-button>

    <wa-button type="reset" variant="neutral" appearance="plain">
      Forgot Password?
    </wa-button>
  </div>
</form>

<!-- rating + switch -->
<div class="wa-split wa-gap-xl wa-align-items-end">
  <div class="wa-stack">
    <h4 class="wa-heading-s">How was your chariot ride, Gaius?</h4>

    <span><wa-rating label="Your Rating" size="l"></wa-rating></span>
  </div>

  <wa-switch>Share with the driver?</wa-switch>
</div>

Feedback Components

Data Viz Components

Action Components

Form Components

We're committed to standards-driven design using proven, native web technologies (nothing more than HTML, CSS, and JavaScript). That's why Web Awesome is built with incredibly readable, utterly stable web components.

Human-Friendly Markup
Well-Scoped Styles
Sensible UX/UI Defaults
Performance-Optimized
Browser-Bulletproof
Accessibility Built In
Framework-Friendly
Framework-Free

Find a component to use in your project…

View All Components

Get More with Web Awesome Pro!

Web Awesome comes with everything to make something awesome — for free.

Web Awesome Pro adds even more awesome with Pro components, premium themes, color tools, team collaboration, and more.

Build for Free

Do More with Pro

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

Plus, as a Pro subscriber, you help grow the open-source project!

In our roots and :root{}
Proudly an Open Source Project

Link to this section

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

View GitHub Project

Star GitHub Project

A big thanks and to our Kickstarter backers!

Over 7,000 backers helped us launch Web Awesome — thank you. Your continued support has helped us ship new components and features, making the web a little more awesome.

Revisit the Awesome of the Kickstarter campaign

Help put the “We” in Web Awesome

Suggest an Idea

Share your thoughts and feature requests on GitHub discussions.

See + Share Ideas

Connect with Other Developers

Ask questions, share tips, and connect with others using Web Awesome on Discord.

Join the Discord Server

Report an Issue

See something off or not working as expected? Open an issue on GitHub and let us know.

Report an Issue

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

The Web's Open Source Design System

All You Need to Make Something Awesome
What's Included in Web Awesome?

UI Components

Theming

CSS Utilities

Page Layouts

Native Styles

Localization

AI Agent Support

Design Patterns

Figma Design Kit

Put the “PWN” in Components
Simple Syntax. Powerful Components.

Whoaaa, we're half way there…

How was your chariot ride, Gaius?

Get More with Web Awesome Pro!

In our roots and :root{}
Proudly an Open Source Project

A big thanks and to our Kickstarter backers!

Help put the “We” in Web Awesome

Suggest an Idea

Connect with Other Developers

Report an Issue

Quick Links

Recent Searches

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Web Awesome Elsewhere

Web Awesome

The Web's Open Source Design System

Quick Start

Looking to start a different way?

All You Need to Make Something Awesome What's Included in Web Awesome?

UI Components

Theming

CSS Utilities

Page Layouts

Native Styles

Localization

AI Agent Support

Design Patterns

Figma Design Kit

Put the “PWN” in Components Simple Syntax. Powerful Components.

Whoaaa, we're half way there…

How was your chariot ride, Gaius?

Get More with Web Awesome Pro!

In our roots and :root{} Proudly an Open Source Project

A big thanks and to our Kickstarter backers!

Help put the “We” in Web Awesome

Suggest an Idea

Connect with Other Developers

Report an Issue

Quick Links

Recent Searches

We Have Cookies…

All You Need to Make Something Awesome
What's Included in Web Awesome?

Put the “PWN” in Components
Simple Syntax. Powerful Components.

In our roots and :root{}
Proudly an Open Source Project