🏝 Animal-Island-UI 组件库产品介绍（动森/疯狂动物城风React UI框架）

一、项目概述

Animal-Island-UI是一款开源、轻量级的React+TypeScript前端UI组件库，因软萌卡通画风常被俗称“疯狂动物城UI框架”，设计原型取自任天堂爆款游戏《集合啦！动物森友会》界面视觉，采用Vite工程化构建，开源协议MIT，全组件自研视觉、图标与动效，无商用版权素材风险。 项目分为PC端、移动端双套组件体系，兼顾桌面网页与H5页面开发，主打温暖圆润、低饱和度马卡龙卡通设计，区别于Ant Design、Element等偏商用冷峻风格组件库，是小众可爱风前端开发首选方案。

• •GitHub源码：https://github.com/guokaigdg/animal-island-ui
• •PC在线预览：https://guokaigdg.github.io/animal-island-ui-pc/
• •移动端预览：https://guokaigdg.github.io/animal-island-ui-mobile/
• •NPM安装包：animal-island-ui

二、核心设计特色

1. •独特卡通视觉体系 整体采用大圆角、不规则柔和切边、奶油系配色，按钮、卡片自带3D凹陷按压动效，复刻动森原生点击反馈；弹窗使用SVG不规则波浪边框，摒弃直角死板样式，全组件统一设计规范，整体治愈温馨。
2. •轻量化+原生TS类型 零冗余依赖，组件全量TypeScript类型定义，IDE自动提示参数，开箱即用，打包体积小巧，适配SPA、多页面、小程序内嵌React项目。
3. •灵活主题自定义 依托CSS变量全局配置主色、圆角、阴影，支持一键换肤、深浅色模式切换，开发者可快速修改整套UI色调，适配品牌定制需求。
4. •完善交互细节 开关、输入框、弹窗附带原生微动画，弹窗支持ESC快捷键关闭、遮罩点击关闭，表单组件内置校验状态、清空按钮、前后缀插槽等实用能力。

三、现有组件能力（40+常用组件，8大分类）

1.基础表单组件

Button（5种样式+3种尺寸、加载态/危险按钮/幽灵按钮）、Input输入框、Switch开关、Checkbox复选框、Radio单选、Select下拉选择，覆盖绝大多数表单场景。

2.容器与展示组件

Card圆角卡片、Modal异形弹窗、Alert提示框、Tag标签、Divider不规则分割线、Badge徽标、Timeline时间轴，卡片自带阴影分层效果。

3.特殊特色组件（框架亮点）

Phone手机面板组件、Time时间选择器、打字机动画组件、折叠面板Collapse、进度条、加载动画Loading，是区别于通用UI库的标志性组件。

4.布局导航组件

Footer底部栏、NavBar导航栏、Grid栅格布局，PC/移动端布局组件相互隔离，适配两端响应式开发。

四、适用开发场景

1. •少儿教育类网站、儿童答题系统、早教H5：柔和画风适配低龄用户视觉习惯；
2. •休闲小游戏官网、二次元个人博客、动漫周边商城：卡通调性契合产品定位；
3. •个人前端练手项目、组件化学习：代码结构规范，适合学习TS+React组件封装思路；
4. •文创、宠物、园艺类产品管理后台，摆脱传统后台呆板界面。

五、快速接入示例

# 安装依赖
npm install animal-island-ui

import { Button } from 'animal-island-ui'
// 卡通3D按钮
<Button type="primary" loading={false}>动物岛按钮</Button>

六、项目拓展生态

除React原版外，社区衍生出Vue3移植版、Compose安卓组件版；另有二次优化分支laeva-animal-island-ui，新增更多拓展组件，满足进阶开发需求。