AWC UI 发布：一套跨 React、Angular、Vue 与 Svelte 的 Material Design 3 组件库
译注：本文编译自 dev.to 平台文章《Introducing AWC UI: Material Design 3 for React, Angular, Vue and Svelte》，作者为 AWC UI 项目发起人。原文链接见文末。以下内容为对原文的忠实翻译与整理，不代表本站观点。
开发者 ivmit 在 dev.to 上介绍了其开源项目 AWC UI。作者表示，他之所以开始构建这个项目，是因为找不到一个既能满足企业级应用需求、又保持框架无关的 Material Design 3 组件库。他希望有一套一致的组件，可以在 React、Angular、Vue 和 Svelte 之间通用，同时具备大型应用所需的实用能力：无障碍表单、主题定制、RTL 支持以及服务端渲染。
AWC UI 正是这一需求的产物：一个基于标准 Web Components 构建的开源库，包含 56 个 Material Design 3 组件。 其核心部分以 MIT 许可证免费提供。开发者可以直接在浏览器中浏览组件，或试用应用示例。
一套组件系统，适配不同框架
当不同团队使用不同框架时，保持界面一致往往意味着要为同一套设计系统维护多份实现。
AWC UI 为这些应用提供了共享的组件基础。它支持 React、Angular、Vue、Svelte 以及纯 HTML，并提供框架集成与 TypeScript 支持。团队可以保留各自的应用技术栈，同时共享同一套视觉语言与组件行为。
覆盖应用所需的更多环节
企业级应用不仅需要按钮，还需要表单、导航、对话框、表格和反馈状态。
AWC UI 将这些能力整合在一起，并提供日期与时间选择器、自动补全、多选、组织架构图以及基础图表。它们共享 Material Design 3 的样式与行为，从而减少了拼凑不相关 UI 包、再设法让它们看起来一致的工作量。
表单控件还与原生 HTML 表单集成，包括提交、校验和重置。这意味着围绕日常表单交互所需的定制代码更少。
从一开始就考虑无障碍与国际化
键盘导航、焦点管理、ARIA 语义和屏幕阅读器支持都是组件工作的一部分，并针对 WCAG 2.1 AA 标准进行自动化无障碍检查。
其目标是让开发者在构建无障碍界面时有一个更好的起点。最终应用的无障碍程度，仍取决于其页面如何设计与组装。
内置的 RTL 支持 和可本地化的组件文案，帮助团队面向不同语言构建产品，而无需为从右到左的布局单独维护一套控件。
可匹配产品的共享设计系统
Material Design 3 提供了基础，而设计令牌（design tokens）让你可以将其适配到自己的品牌。AWC UI 包含浅色与深色主题、基于种子颜色的主题生成器，以及组件级样式选项。
密度系统允许你为信息密集的界面调整间距。仪表盘和设置页面可以使用相同的组件，但采用适合各自工作流的密度。
面向开发与维护的实用特性
- 核心包零第三方运行时依赖： 需要维护的依赖面更小。
- 服务端渲染： 为 Next.js、Nuxt、SvelteKit 和 Angular SSR 提供文档化的集成方案，使用 Declarative Shadow DOM。
- 面向 AI 的文档： 组件 API 与使用指南随包发布，因此编码助手可以使用与已安装版本匹配的文档。
- 开源： 可在 GitHub 上查看实现、报告问题并贡献改进。
这些正是作者在为企业级应用构建 AWC UI 时所考虑的需求：跨技术栈的一致 UI、可配置主题、国际化以及可预期的表单行为。
看看你能构建什么
组件页面提供交互式演示、API 文档以及针对每个受支持框架的示例。
示例展示页则将这些组件组合成面向银行、医疗、预订等场景的演示应用。在将库引入自己的项目之前，可以通过它们探索完整的页面与交互。
你也可以在 Storybook 中查看组件的各种变体。
建议从组件和示例展示入手。 如果 AWC UI 适合你的项目，文档会引导你完成安装与集成。
源码托管在 GitHub，核心包发布在 npm。如果愿意关注该项目，作者欢迎在 GitHub 上点星支持。
作者在文末提出了一个问题：在你的团队采用一个组件库之前，你需要它具备哪些条件？