violit-dev/violit/webawesome

Web Awesome

Web Awesome is an open source UI component library with a Pro offering that helps sustain the project. It provides 50+ accessible, customizable web components that work with any framework.

Pro components and features are available to paid users. Purchase Pro

Quick Start

npm Installation

npm install @awesome.me/webawesome

Import styles and components:

import '@awesome.me/webawesome/dist/styles/webawesome.css';
import '@awesome.me/webawesome/dist/components/button/button.js';

CDN / Project Setup

The easiest way to use Web Awesome is with a hosted project. Create a project to get a single line of code that loads everything automatically.

For detailed installation options, see Installation Guide.

Core Concepts

Web Awesome components are custom HTML elements. They work like native elements but with enhanced functionality.

• Attributes & Properties: Configure components via HTML attributes or JavaScript properties
• Events: Listen to custom events prefixed with wa- (e.g., wa-change, wa-input)
• Methods: Call methods programmatically (e.g., element.focus())
• Slots: Insert content into named slots (e.g., <wa-icon slot="start">)
• CSS Parts: Style internal elements using ::part() selectors
• CSS Custom Properties: Customize appearance with CSS variables

Important: Always use closing tags. Custom elements cannot self-close.

<!-- Correct -->
<wa-input></wa-input>
 
<!-- Incorrect - will not work -->
<wa-input />

For complete usage details, see Usage Guide.

Components

Free Components

Actions

• `<wa-button>` - Buttons represent actions that are available to the user. (docs)
• `<wa-button-group>` - Button groups can be used to group related buttons into sections. (docs)
• `<wa-copy-button>` - Copies data to the clipboard when the user clicks the button. (docs)
• `<wa-dropdown>` - Dropdowns expose additional content that "drops down" in a panel. (docs)
• `<wa-dropdown-item>` - Provides items to select in a dropdown. (docs)
• `<wa-qr-code>` - Generates a QR code and renders it using the Canvas API. (docs)

Feedback & Status

• `<wa-badge>` - Badges are used to draw attention and display statuses or counts. (docs)
• `<wa-callout>` - Callouts are used to display important messages inline. (docs)
• `<wa-progress-bar>` - Progress bars are used to show the status of an ongoing operation. (docs)
• `<wa-progress-ring>` - Progress rings are used to show the progress of a determinate operation in a circular fashion. (docs)
• `<wa-skeleton>` - Skeletons are used to provide a visual representation of where content will eventually be drawn. (docs)
• `<wa-spinner>` - Spinners are used to show the progress of an indeterminate operation. (docs)
• `<wa-tag>` - Tags are used as labels to organize things or to indicate a selection. (docs)
• `<wa-tooltip>` - Tooltips display additional information based on a specific action. (docs)

Form Controls

• `<wa-checkbox>` - Checkboxes allow the user to toggle an option on or off. (docs)
• `<wa-color-picker>` - Color pickers allow the user to select a color. (docs)
• `<wa-input>` - Inputs collect data from the user. (docs)
• `<wa-number-input>` - Number inputs allow users to enter and edit numeric values with optional stepper buttons. (docs)
• `<wa-option>` - Options define the selectable items within various form controls such as select. (docs)
• `<wa-radio>` - Radios allow the user to select a single option from a group. (docs)
• `<wa-radio-group>` - Radio groups are used to group multiple radios so they function as a single form control. (docs)
• `<wa-rating>` - Ratings give users a way to quickly view and provide feedback. (docs)
• `<wa-select>` - Selects allow you to choose items from a menu of predefined options. (docs)
• `<wa-slider>` - Ranges allow the user to select a single value within a given range using a slider. (docs)
• `<wa-switch>` - Switches allow the user to toggle an option on or off. (docs)
• `<wa-textarea>` - Textareas collect data from the user and allow multiple lines of text. (docs)

Imagery

• `<wa-animated-image>` - A component for displaying animated GIFs and WEBPs that play and pause on interaction. (docs)
• `<wa-avatar>` - Avatars are used to represent a person or object. (docs)
• `<wa-carousel>` - Carousels display an arbitrary number of content slides along a horizontal or vertical axis. (docs)
• `<wa-carousel-item>` - A carousel item represent a slide within a carousel. (docs)
• `<wa-comparison>` - Compare visual differences between similar content with a sliding panel. (docs)
• `<wa-icon>` - Icons are symbols that can be used to represent various options within an application. (docs)
• `<wa-zoomable-frame>` - Zoomable frames render iframe content with zoom and interaction controls. (docs)

Navigation

• `<wa-breadcrumb>` - Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. (docs)
• `<wa-breadcrumb-item>` - Breadcrumb Items are used inside breadcrumbs to represent different links. (docs)
• `<wa-tab>` - Tabs are used inside tab groups to represent and activate tab panels. (docs)
• `<wa-tab-group>` - Tab groups organize content into a container that shows one section at a time. (docs)
• `<wa-tab-panel>` - Tab panels are used inside tab groups to display tabbed content. (docs)
• `<wa-tree>` - Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user. (docs)
• `<wa-tree-item>` - A tree item serves as a hierarchical node that lives inside a tree. (docs)

Organization

• `<wa-card>` - Cards can be used to group related subjects in a container. (docs)
• `<wa-details>` - Details show a brief summary and expand to show additional content. (docs)
• `<wa-dialog>` - Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention. (docs)
• `<wa-divider>` - Dividers are used to visually separate or group elements. (docs)
• `<wa-drawer>` - Drawers slide in from a container to expose additional options and information. (docs)
• `<wa-page>` - Pages offer an easy way to scaffold entire page layouts using minimal markup. (docs)
• `<wa-scroller>` - Scrollers create an accessible container while providing visual cues that help users identify and navigate through content that scrolls. (docs)
• `<wa-split-panel>` - Split panels display two adjacent panels, allowing the user to reposition them. (docs)

Utilities