# AWC UI > Accessible, open-source Material Design 3 Web Components for React, Angular, Vue, Svelte, or plain HTML, with Next.js SSR, Angular SSR, Nuxt SSR, SvelteKit SSR, RTL, theming, forms, and charts. AWC UI (Advanced Web Components UI) is a Stencil-built component library. The HTML documentation is canonical; the links below expose the same guidance in concise, machine-readable form. ## Start here - [Quick start](https://awc-ui.dev/getting-started/quick-start/): Build a first AWC UI page in under five minutes. - [Installation](https://awc-ui.dev/getting-started/installation/): Install and configure the core library or a typed framework integration. - [Complete LLM specification](https://awc-ui.dev/llm/awc-ui.main-llm.md): Decision protocol, component matrix, tokens, recipes, accessibility contracts, and anti-patterns in Markdown. - [Full single-file context](https://awc-ui.dev/llms-full.txt): The complete LLM specification served from the conventional root filename. - [Building with AI](https://awc-ui.dev/guides/building-with-ai/): Set up your assistant, build or review interfaces, and add optional AI skills or MCP documentation tools. - [npm: @awc-ui/core](https://www.npmjs.com/package/@awc-ui/core): Published core Web Components package and README. - [GitHub: awc-ui/core](https://github.com/awc-ui/core): Source, issues, releases, examples, and contribution history. ## Core guidance - [Component index](https://awc-ui.dev/components/): All public components grouped by purpose. - [Accessibility](https://awc-ui.dev/guides/accessibility/): Keyboard, focus, semantics, screen reader, and WCAG guidance. - [Theming overview](https://awc-ui.dev/theming/overview/): MD3 system tokens, component tokens, light/dark themes, and customization. - [RTL behavior](https://awc-ui.dev/behaviour/rtl/): Right-to-left layout, icon mirroring, and logical properties. - [Server-side rendering reference apps](https://github.com/awc-ui/core/tree/main/apps): Validated Next.js, Nuxt, SvelteKit, Astro, and Angular SSR implementations. - [Application recipes](https://awc-ui.dev/recipes/app-shell/): Start with the SSR-ready app shell, then follow its links to complete production-shaped examples. - [Theme generator](https://awc-ui.dev/theme-generator/): Generate and validate Material Design 3 palettes and downloadable CSS tokens. ## Application showcases - [Showcase index](https://awc-ui.dev/showcase/): Complete applications built with AWC UI, including consumer products and operational workspaces. - [Encore shows and tickets](https://awc-ui.dev/showcase/encore/): Five framework builds with show discovery, ticket selection, demo checkout, a browser ticket wallet, and AWC loading feedback. - [Roam travel booking](https://awc-ui.dev/showcase/booking/): Destination discovery, filters, property details, saved stays, demo checkout, trips, login, signup, MFA, and appearance preferences. - [Aero flight booking](https://awc-ui.dev/showcase/aero/): Flight search, fares, traveler details, seats, bags, booking review, and tab-local demo trips using AWC React components. - [Maple House smart home](https://awc-ui.dev/showcase/smart-home/): Habitat home controls with simulated rooms, devices, scenes, climate, energy charts, routines, Arabic, and appearance settings. ## Framework packages - [Web Components](https://awc-ui.dev/frameworks/web-components/): Framework-agnostic custom elements for HTML and every major framework. - [React components and Next.js SSR](https://awc-ui.dev/frameworks/react/): Typed React 18+ components with a dedicated server-rendering entry. - [Angular components and Angular SSR](https://awc-ui.dev/frameworks/angular/): Angular 20.3.31+ directives, forms, standalone setup, and server rendering. - [Vue components and Nuxt SSR](https://awc-ui.dev/frameworks/vue/): Typed Vue 3 components, plugin registration, and Nuxt server rendering. - [Svelte components and SvelteKit SSR](https://awc-ui.dev/frameworks/svelte/): Svelte 5 custom elements and SvelteKit server rendering. - [Web Components SSR](https://awc-ui.dev/frameworks/ssr/): Declarative Shadow DOM architecture and framework support matrix. - [@awc-ui/react](https://www.npmjs.com/package/@awc-ui/react): Typed React 18+ components with Next.js and React SSR. - [@awc-ui/angular](https://www.npmjs.com/package/@awc-ui/angular): Angular 20.3.31+ components, forms directives, and Angular SSR. - [@awc-ui/vue](https://www.npmjs.com/package/@awc-ui/vue): Typed Vue 3 components with Nuxt SSR. - [@awc-ui/svelte](https://www.npmjs.com/package/@awc-ui/svelte): Svelte 5 components with SvelteKit SSR. - [@awc-ui/tokens](https://www.npmjs.com/package/@awc-ui/tokens): Framework-agnostic Material Design 3 CSS design tokens. - [@awc-ui/theme](https://www.npmjs.com/package/@awc-ui/theme): Seed-color theme generation and CSS output. ## Component Markdown references Each file below is the component-owned manual: selection guidance, API, accessibility contract, examples, and anti-patterns. ### Actions - [Button (md-button)](https://awc-ui.dev/components/button/readme.md): Canonical md-button component manual. - [Button Group (md-button-group)](https://awc-ui.dev/components/button-group/readme.md): Canonical md-button-group component manual. - [FAB (md-fab)](https://awc-ui.dev/components/fab/readme.md): Canonical md-fab component manual. - [FAB Menu (md-fab-menu)](https://awc-ui.dev/components/fab-menu/readme.md): Canonical md-fab-menu component manual. - [Icon Button (md-icon-button)](https://awc-ui.dev/components/icon-button/readme.md): Canonical md-icon-button component manual. - [Segmented Button (md-segmented-button)](https://awc-ui.dev/components/segmented-button/readme.md): Canonical md-segmented-button component manual. - [Split Button (md-split-button)](https://awc-ui.dev/components/split-button/readme.md): Canonical md-split-button component manual. ### Charts - [Area Chart (md-area-chart)](https://awc-ui.dev/components/area-chart/readme.md): Canonical md-area-chart component manual. - [Bar Chart (md-bar-chart)](https://awc-ui.dev/components/bar-chart/readme.md): Canonical md-bar-chart component manual. - [Line Chart (md-line-chart)](https://awc-ui.dev/components/line-chart/readme.md): Canonical md-line-chart component manual. - [Pie Chart (md-pie-chart)](https://awc-ui.dev/components/pie-chart/readme.md): Canonical md-pie-chart component manual. - [Sparkline (md-sparkline)](https://awc-ui.dev/components/sparkline/readme.md): Canonical md-sparkline component manual. ### Communication - [Badge (md-badge)](https://awc-ui.dev/components/badge/readme.md): Canonical md-badge component manual. - [Loading Indicator (md-loading-indicator)](https://awc-ui.dev/components/loading-indicator/readme.md): Canonical md-loading-indicator component manual. - [Meter (md-meter)](https://awc-ui.dev/components/meter/readme.md): Canonical md-meter component manual. - [Progress Indicator (md-progress-indicator)](https://awc-ui.dev/components/progress-indicator/readme.md): Canonical md-progress-indicator component manual. - [Skeleton (md-skeleton)](https://awc-ui.dev/components/skeleton/readme.md): Canonical md-skeleton component manual. - [Snackbar (md-snackbar)](https://awc-ui.dev/components/snackbar/readme.md): Canonical md-snackbar component manual. - [Status Dot (md-status-dot)](https://awc-ui.dev/components/status-dot/readme.md): Canonical md-status-dot component manual. - [Tooltip (md-tooltip)](https://awc-ui.dev/components/tooltip/readme.md): Canonical md-tooltip component manual. ### Containment - [Accordion (md-accordion)](https://awc-ui.dev/components/accordion/readme.md): Canonical md-accordion component manual. - [Bottom Sheet (md-bottom-sheet)](https://awc-ui.dev/components/bottom-sheet/readme.md): Canonical md-bottom-sheet component manual. - [Card (md-card)](https://awc-ui.dev/components/card/readme.md): Canonical md-card component manual. - [Dialog (md-dialog)](https://awc-ui.dev/components/dialog/readme.md): Canonical md-dialog component manual. - [Divider (md-divider)](https://awc-ui.dev/components/divider/readme.md): Canonical md-divider component manual. - [List (md-list)](https://awc-ui.dev/components/list/readme.md): Canonical md-list component manual. - [Ripple (md-ripple)](https://awc-ui.dev/components/ripple/readme.md): Canonical md-ripple component manual. - [Side Sheet (md-side-sheet)](https://awc-ui.dev/components/side-sheet/readme.md): Canonical md-side-sheet component manual. ### Data Display - [Avatar (md-avatar)](https://awc-ui.dev/components/avatar/readme.md): Canonical md-avatar component manual. - [Organization Chart (md-organization-chart)](https://awc-ui.dev/components/organization-chart/readme.md): Canonical md-organization-chart component manual. - [Table (md-table)](https://awc-ui.dev/components/table/readme.md): Canonical md-table component manual. ### Navigation - [App Bar (md-app-bar)](https://awc-ui.dev/components/app-bar/readme.md): Canonical md-app-bar component manual. - [Breadcrumbs (md-breadcrumbs)](https://awc-ui.dev/components/breadcrumbs/readme.md): Canonical md-breadcrumbs component manual. - [Menu (md-menu)](https://awc-ui.dev/components/menu/readme.md): Canonical md-menu component manual. - [Navigation Bar (md-navigation-bar)](https://awc-ui.dev/components/navigation-bar/readme.md): Canonical md-navigation-bar component manual. - [Navigation Rail (md-navigation-rail)](https://awc-ui.dev/components/navigation-rail/readme.md): Canonical md-navigation-rail component manual. - [Stepper (md-stepper)](https://awc-ui.dev/components/stepper/readme.md): Canonical md-stepper component manual. - [Tabs (md-tabs)](https://awc-ui.dev/components/tabs/readme.md): Canonical md-tabs component manual. - [Toolbar (md-toolbar)](https://awc-ui.dev/components/toolbar/readme.md): Canonical md-toolbar component manual. ### Selection - [Checkbox (md-checkbox)](https://awc-ui.dev/components/checkbox/readme.md): Canonical md-checkbox component manual. - [Chip (md-chip)](https://awc-ui.dev/components/chip/readme.md): Canonical md-chip component manual. - [Color Picker (md-color-picker)](https://awc-ui.dev/components/color-picker/readme.md): Canonical md-color-picker component manual. - [Date Picker (md-date-picker)](https://awc-ui.dev/components/date-picker/readme.md): Canonical md-date-picker component manual. - [Multi Select (md-multi-select)](https://awc-ui.dev/components/multi-select/readme.md): Canonical md-multi-select component manual. - [Radio (md-radio)](https://awc-ui.dev/components/radio/readme.md): Canonical md-radio component manual. - [Rating (md-rating)](https://awc-ui.dev/components/rating/readme.md): Canonical md-rating component manual. - [Select (md-select)](https://awc-ui.dev/components/select/readme.md): Canonical md-select component manual. - [Slider (md-slider)](https://awc-ui.dev/components/slider/readme.md): Canonical md-slider component manual. - [Switch (md-switch)](https://awc-ui.dev/components/switch/readme.md): Canonical md-switch component manual. - [Time Picker (md-time-picker)](https://awc-ui.dev/components/time-picker/readme.md): Canonical md-time-picker component manual. - [Transfer List (md-transfer-list)](https://awc-ui.dev/components/transfer-list/readme.md): Canonical md-transfer-list component manual. ### Text Inputs - [Autocomplete (md-autocomplete)](https://awc-ui.dev/components/autocomplete/readme.md): Canonical md-autocomplete component manual. - [Number Field (md-number-field)](https://awc-ui.dev/components/number-field/readme.md): Canonical md-number-field component manual. - [OTP Field (md-otp-field)](https://awc-ui.dev/components/otp-field/readme.md): Canonical md-otp-field component manual. - [Search (md-search)](https://awc-ui.dev/components/search/readme.md): Canonical md-search component manual. - [Text Field (md-text-field)](https://awc-ui.dev/components/text-field/readme.md): Canonical md-text-field component manual. ## Optional - [Storybook](https://awc-ui.dev/storybook/): Interactive states, visual examples, and behavior scenarios for every component. - [Contributing](https://awc-ui.dev/contributing/): Repository architecture, tests, release expectations, and ways to help.