动森UI组件（开源 html  animal-island-ui ）

「35 动森UI组件」
/~70653YiWTd~:/
链接：https://pan.quark.cn/s/8027f13b2928

🏝 Animal-Island-UI

一款参考《动物森友会》风格的 React UI 组件库

---

项目简介

Animal-Island-UI 是基于 React + TypeScript 实现的轻量级 UI 组件库，设计灵感来源于任天堂《集合啦！动物森友会》游戏界面。项目专注于个人前端技术练习与组件化开发学习，所有视觉元素、布局、图标、动画均为独立设计实现，未直接使用任何任天堂官方美术素材、代码或资源文件。

---

项目亮点

• 风格独特：复刻动森温馨可爱的视觉语言，圆润造型搭配柔和配色

• 生态完善：除 React 版本外，提供 Vue 3 移植版及 Android Jetpack Compose 版本

• 文档齐全：包含 AI 助手专用手册、设计复刻提示词、像素级样式规范等

• 开箱即用：支持 npm 安装，提供完整示例与开发指引

---

版本与数据

• 当前版本：v0.8.0（新增 CodeBlock 代码高亮组件）

• Star 数量：2.1k+

• 月下载量：4.6k+

• 开源协议：MIT

• 推荐收录：HelloGitHub 第 121 期推荐项目

---

相关版本

• Vue 3 版本：animal-island-vue（同风格 Vue 组件库）

• Android 版本：AnimalIslandUI（Jetpack Compose 实现）

---

在线预览

• PC 端演示：https://guokaigdg.github.io/animal-island-ui/#/

• 移动端演示：https://guokaigdg.github.io/animal-island-ui/#/

---

安装方式

通过 npm 安装：

npm install animal-island-ui

---

快速上手

重要提示：使用前务必导入样式文件，否则组件将无样式与字体。

在项目中导入所需组件并引入样式，即可快速使用。例如：导入 Button 和 Card 组件，设置按钮类型为 primary，卡片颜色为 app-blue，即可实现基础界面效果。

本地开发

1. 克隆仓库：git clone https://github.com/guokaigdg/animal-island-ui.git

2. 进入目录：cd animal-island-ui

3. 安装依赖：npm install

4. 启动开发服务器：npm run dev

5. 构建组件库：npm run build

6. 构建 Demo 站点：npm run build:demo

---

使用案例

• ac-site-template：动森主题个人网站模板（Astro + TailwindCSS + DaisyUI）

• HiKid：儿童英语口语听力练习桌面应用（React + TypeScript，完全离线运行）

• animal-island-blog：动森风格个人博客（React 19 + Vite + animal-island-ui）

• AnimalIslandUI：动森风格 Android UI 库（Jetpack Compose 实现）

---

注意事项

• 本项目仅用于个人学习、研究与非商业展示，禁止任何形式的商业使用、二次售卖或盈利行为。

• 不得用于商业产品、企业项目、对外服务或付费模板。

• 使用本组件库产生的任何风险由使用者自行承担。

---

版权与免责声明

• 本项目并非任天堂官方产品，与任天堂株式会社无任何关联、授权或合作关系。

• 项目名称中的游戏名称仅为风格描述性引用，不构成商标使用或品牌关联。

• 所有界面风格仅为设计灵感参考，不构成对原作品的复制或侵权。

• 若版权方认为相关内容存在侵权嫌疑，可通过 Issue 或邮件联系，我们将第一时间整改或删除。

---

联系方式

如有问题或版权相关沟通，请通过 GitHub Issue 或邮件联系。

---

开源协议

本项目基于 MIT 开源协议发布，仅限学习使用。作者不对因使用本库导致的任何法律问题或损失承担责任