Skip to content
AWC UI

Components

The full AWC UI component set — 56 Material Design 3 components across seven MD3 categories. Every component page includes a live demo, the complete API (props, events, methods, slots, CSS custom properties, and CSS parts), and copy-paste code for HTML, React, Angular, Vue, and Svelte.

Use the filter below to jump to a component by name or tag, or scan by category.

Actions

7
Button <md-button> Button Group <md-button-group> FAB <md-fab> FAB Menu <md-fab-menu> Icon Button <md-icon-button> Segmented Button <md-segmented-button> Split Button <md-split-button>

Charts

5
Area Chart <md-area-chart> Bar Chart <md-bar-chart> Line Chart <md-line-chart> Pie Chart <md-pie-chart> Sparkline <md-sparkline>

Communication

8
Badge <md-badge> Loading Indicator <md-loading-indicator> Meter <md-meter> Progress Indicator <md-progress-indicator> Skeleton <md-skeleton> Snackbar <md-snackbar> Status Dot <md-status-dot> Tooltip <md-tooltip>

Containment

8
Accordion <md-accordion> Bottom Sheet <md-bottom-sheet> Card <md-card> Dialog <md-dialog> Divider <md-divider> List <md-list> Ripple <md-ripple> Side Sheet <md-side-sheet>

Data Display

3
Avatar <md-avatar> Organization Chart <md-organization-chart> Table <md-table>

Navigation

8
App Bar <md-app-bar> Breadcrumbs <md-breadcrumbs> Menu <md-menu> Navigation Bar <md-navigation-bar> Navigation Rail <md-navigation-rail> Stepper <md-stepper> Tabs <md-tabs> Toolbar <md-toolbar>

Selection

12
Checkbox <md-checkbox> Chip <md-chip> Color Picker <md-color-picker> Date Picker <md-date-picker> Multi Select <md-multi-select> Radio <md-radio> Rating <md-rating> Select <md-select> Slider <md-slider> Switch <md-switch> Time Picker <md-time-picker> Transfer List <md-transfer-list>

Text Inputs

5
Autocomplete <md-autocomplete> Number Field <md-number-field> OTP Field <md-otp-field> Search <md-search> Text Field <md-text-field>

New to AWC UI?

Section titled “New to AWC UI?”

Start with the Installation and Quick Start guides, then come back here to wire up the components you need. To recolor or reshape them, see Theming.