amplify-ui：AWS Amplify 可主题化前端组件库

获取下载链全程约 1 分钟

打开微信，搜索「软件教程管家」关注，或长按下方二维码关注
回复关键词 amplify-ui
公众号自动回复网盘链接，点击即可保存下载

打开微信扫一扫关注
或搜索【软件教程管家】

amplify-ui 是 AWS Amplify 官方的开源前端组件库，面向用 Amplify 搭建应用的团队。它的卖点很直接：认证、存储、数据展示这些和云端绑定的界面不用自己从头写，一套可主题化的组件库直接给出来，还能按品牌调外观。组件库覆盖 React、React Native、Angular 与 Vue，其中 React 的覆盖最完整。

项目	信息
仓库地址	aws-amplify/amplify-ui
开发语言	TypeScript
开源许可证	Apache-2.0
Star 数	约 1144（GitHub 实时值）
适用对象	用 AWS Amplify 构建前端应用的开发团队

amplify-ui 是什么

amplify-ui 把前端组件分成三层：云连接组件、基础组件和数据绑定组件。云连接组件直接对接 Amplify 的云端能力，比如 Authenticator 处理登录注册流程，StorageBrowser 与 FileUploader 处理文件浏览与上传；基础组件是 Button、Card、Grid、Menu、Pagination 这类通用界面元素；数据绑定组件则把 DataStore 里的数据直接渲染成列表或集合视图。再加上一套主题系统，整套组件的外观可以按应用品牌统一调整。

它不是一套与云无关的通用设计系统，而是为 Amplify 应用量身做的组件库，离开 Amplify 的云端配置，部分连接组件的价值会打折。

核心功能

Authenticator：开箱即用的认证界面，覆盖登录、注册、忘记密码、多因素认证等流程，不用自己拼表单与状态机。
StorageBrowser 与 FileUploader：基于 Amplify Storage 的文件浏览与上传界面，支持目录导航与批量操作。
基础组件全家桶：Button、Card、Grid、Flex、Menu、Pagination、表单与反馈类组件，风格统一，可直接组合页面。
DataStoreCollections：把 DataStore 的数据集合绑定到界面展示，数据变化时视图自动更新。
主题定制：通过主题 tokens 调整颜色、字号、圆角与间距，支持深色模式与品牌化外观。
可访问性：组件按无障碍标准设计，键盘操作与屏幕阅读器支持是官方明确的能力项。
多框架包：提供 @aws-amplify/ui-react、@aws-amplify/ui-vue、@aws-amplify/ui-angular 等包，React Native 也有部分连接组件。

适用场景

带登录的应用：需要注册登录、密码找回、多因素认证的管理后台或会员产品，Authenticator 能省掉大量重复开发。
文件管理页面：用户要上传、浏览、下载云端文件，如资料库、作品提交、附件管理等场景。
数据展示页面：用 DataStore 做数据层时，直接把集合数据渲染成列表、卡片或表格。
统一品牌外观：多个页面、多个模块共用一套主题，保证视觉一致，再按品牌色微调。
快速搭原型：Amplify 项目初期用现成组件拼出可用界面，先跑通流程再精细化打磨。

组件库上手步骤

以最常见的 React 项目为例：

安装对应框架的包：React 项目装 @aws-amplify/ui-react，Vue 项目装 @aws-amplify/ui-vue，Angular 项目装 @aws-amplify/ui-angular。
在应用入口引入 Amplify 配置，先用 Amplify.configure(outputs) 接好后端，确保认证与存储等能力已配置。
在需要认证的页面外层包一层 <Authenticator>，未登录用户自动看到登录界面，登录后才渲染子内容。
需要文件上传时引入 FileUploader，指定好目标路径与接受的文件类型；需要浏览文件时用 StorageBrowser。
在入口引入组件库样式，并在应用顶层包 ThemeProvider，按品牌色覆盖主题 tokens，检查深色模式下的对比度。
跑通登录、上传、数据展示三条主流程后，再逐步把页面里的自定义组件替换成库内基础组件，统一视觉与交互。

注意事项

框架覆盖并不一致：React 的组件最全，Angular、Vue 与 React Native 的可用组件要逐项核对组件矩阵，不能默认全有。
连接组件依赖 Amplify 配置：Authenticator、StorageBrowser 这类组件要先配好对应的云端能力，脱离 Amplify 环境可能无法直接使用。
版本要成套核对：组件库包、Amplify JS 库与框架版本之间有兼容关系，升级前先看官方文档的版本要求，不要只升一个包。
主题定制有学习成本：tokens 体系覆盖面广，深度定制前先看主题文档里的 token 列表，避免用覆盖样式的方式硬改导致后续升级冲突。
样式体积要注意：整库引入会带上不少样式，按需引入与构建工具的摇树优化要配好，避免首屏包体膨胀。
不适合完全脱离 AWS 的项目：如果应用根本不用 Amplify，连接组件用不上，只剩基础组件可比；这时可以对比纯设计系统方案的迁移成本。

工具	定位	云绑定	适合场景
amplify-ui	Amplify 官方组件库	深度绑定 Amplify	Amplify 应用的认证、存储、数据界面
MUI	通用 React 组件库	无	与云无关的 React 应用界面
Ant Design	企业级 React 组件库	无	中后台系统、表单密集型应用
Chakra UI	轻量 React 组件库	无	样式定制灵活的小型应用
PrimeVue / PrimeNG	Vue / Angular 组件库	无	对应框架的通用界面开发

框架覆盖差异

选型前先按目标框架核对组件矩阵：React 覆盖最完整，连接组件与基础组件基本齐全；Vue 与 Angular 提供对应包，但部分高级组件可能缺失；React Native 只有部分连接组件。确认所需组件在目标框架可用后，再确认对应的 Amplify 配置、数据模型与运行环境要求，两个条件都满足再动手接入。