Quick Start

Your First Component

Complete the installation path for your app first, including global styles, fonts and framework registration. The HTML tab is an index.html for the Vite app from that guide: run npx vite to resolve its npm import. The other tabs assume the corresponding framework guide’s setup.

HTML React Angular Vue Svelte

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AWC UI quick start</title>
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,email,more_vert&display=block">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
</head>
<body>
<script type="module">
  import '@awc-ui/core/define';
</script>

<md-button variant="filled" icon="add">Add Item</md-button>
</body>
</html>

Copy

// src/App.tsx
import { MdButton } from '@awc-ui/react';

export default function App() {
return (
  <MdButton
    variant="filled"
    icon="add"
    onMdClick={() => console.log('clicked!')}
  >
    Add Item
  </MdButton>
);
}

Copy

// app.component.ts
import { Component } from '@angular/core';
import { MdButton } from '@awc-ui/angular';

@Component({
selector: 'app-root',
standalone: true,
imports: [MdButton],
template: `
  <md-button variant="filled" icon="add"
    (mdClick)="handleClick()">
    Add Item
  </md-button>
`
})
export class AppComponent {
handleClick() {
  console.log('clicked!');
}
}

Copy

<script setup>
function handleClick() {
console.log('clicked!');
}
</script>

<template>
<md-button variant="filled" icon="add"
  @mdClick="handleClick">
  Add Item
</md-button>
</template>

Copy

<script>
function handleClick() {
  console.log('clicked!');
}
</script>

<md-button variant="filled" icon="add"
on:mdClick={handleClick}>
Add Item
</md-button>

Building a Form

Here is a complete form using several AWC UI components:

<form style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
  <md-text-field name="name" variant="outlined" label="Full name" required></md-text-field>
  <md-text-field name="email" variant="outlined" label="Email" type="email"
    leading-icon="email"></md-text-field>

  <md-select name="role" variant="outlined" label="Role">
    <md-select-option value="admin">Admin</md-select-option>
    <md-select-option value="editor">Editor</md-select-option>
    <md-select-option value="viewer">Viewer</md-select-option>
  </md-select>

  <!-- md-checkbox has no label prop and no slot, so the text must come from a
       wrapping <label>. That is also what makes the text clickable. -->
  <label style="display: flex; align-items: center; gap: 12px;">
    <md-checkbox name="terms" required></md-checkbox>
    I agree to the terms
  </label>

  <md-button type="submit" variant="filled">Submit</md-button>
</form>

Building a Card Layout

Card content uses the default slot. Use ordinary headings and containers for layout. The first card enables interactive; its child buttons remain the keyboard targets. For a card with one action and no nested controls, attach the handler to mdClick and use interactive for keyboard activation.

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;">
  <md-card variant="elevated" interactive>
    <h2>Project Alpha</h2>
    <p>Status: Active</p>
    <div style="display: flex; gap: 8px;">
      <md-button variant="text">Open</md-button>
      <md-icon-button variant="standard" icon="more_vert" aria-label="More project actions"></md-icon-button>
    </div>
  </md-card>

  <md-card variant="outlined">
    <h2>Project Orion</h2>
    <p>Status: Draft</p>
    <div style="display: flex; gap: 8px;">
      <md-button variant="text">Open</md-button>
    </div>
  </md-card>
</div>

Dark Mode

Toggle dark mode by setting the data-theme attribute:

<html data-theme="dark">
  <!-- All MD3 components automatically switch to dark colors -->
</html>

// Toggle programmatically
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
document.documentElement.setAttribute('data-theme', isDark ? '' : 'dark');

Next Steps

• Components — explore all 56 components, grouped by category
• Theming — customize colors and design tokens
• Accessibility — built-in a11y features