动森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 实现）
在线预览
安装方式
通过 npm 安装：
npm install animal-island-ui
快速上手
重要提示：使用前务必导入样式文件，否则组件将无样式与字体。
在项目中导入所需组件并引入样式，即可快速使用。例如：导入 Button 和 Card 组件，设置按钮类型为 primary，卡片颜色为 app-blue，即可实现基础界面效果。
本地开发
克隆仓库：
git clone https://github.com/guokaigdg/animal-island-ui.git进入目录：
cd animal-island-ui安装依赖：
npm install启动开发服务器：
npm run dev构建组件库：
npm run build构建 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 开源协议发布，仅限学习使用。作者不对因使用本库导致的任何法律问题或损失承担责任
