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.
<!-- Required: default theme + autoloader --> <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> <!-- Recommended: utility classes ("CSS Utilities") --> <link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/utilities.css"> <!-- Optional: CSS reset ("Native Styles") --> <link rel="stylesheet" href="https://ka-f.webawesome.com/[email protected]/styles/native.css">
Quick Start
<head> tag and build!
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.
Built for AI Agents
Skills and docs that help your AI coding assistant use Web Awesome effectively.
Design Patterns
Grab-and-go patterns for common site, app, and online product workflows.
Figma Design Kit
Figma components and styles aligned with what you ship in production code.
This is the way.
Follow the Creed
That's no moon.
Turn Around
<!-- 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>
<!-- 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?
<!-- 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>
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
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.
-
Pro Components -
Native Styles -
CSS + Layout Utilities -
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
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.
A big thanks and
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.
Connect with Other Developers
Ask questions, share tips, and connect with others using Web Awesome on Discord.
Report an Issue
See something off or not working as expected? Open an issue on GitHub and let us know.