# 动态官网 / 组件库 / 图表库收藏清单

> 目标：后续做官网、产品页、AI 工具页时，快速找到更有设计感和动态交互的 React / Vue 组件库与图表仓库。  
> 当前原则：只做收藏与分类，不安装、不拉工程、不建仓库。

---

## A. 重点收藏：下次做官网优先看

### 1. React Bits

- GitHub: https://github.com/DavidHDev/react-bits
- 技术栈：React / JavaScript / 动效组件
- 特点：大量 animated、interactive、fully customizable 组件；偏视觉展示和互动体验。
- 适合：
  - 官网首屏
  - 产品卖点区块
  - AI 产品页
  - 创意交互组件
  - 非传统 Landing Page
- 备注：最符合“动态交互设计感、不传统”的方向之一。

### 2. nyxb-ui

- GitHub: https://github.com/nyxb-ui/ui
- 技术栈：React / TypeScript / Tailwind CSS / Framer Motion / shadcn-ui / MagicUI
- 特点：融合 shadcn/ui 与 MagicUI，提供 150+ free/open-source 组件。
- 适合：
  - SaaS 官网
  - AI 工具页
  - 带动效的组件化页面
  - 快速拼装现代视觉风格
- 备注：适合作为 shadcn 体系上的“更有动效和设计感”的组件补充。

---

## B. React：有动态交互设计感的 UI / 组件库

### React Bits

- GitHub: https://github.com/DavidHDev/react-bits
- 关键词：animated components、interactive、3D、customizable
- 推荐度：★★★★★

### Magic UI

- GitHub: https://github.com/magicuidesign/magicui
- 关键词：animated components、effects、copy-paste、design engineers
- 推荐度：★★★★★
- 适合和 shadcn/ui、Tailwind、Framer Motion 一起用。

### HeroUI / NextUI

- GitHub: https://github.com/heroui-inc/heroui
- 关键词：modern React UI library、漂亮、应用型组件
- 推荐度：★★★★☆
- 适合做完整 Web App 的基础 UI，不只是官网动效。

### Animate UI

- GitHub: https://github.com/imskyleen/animate-ui
- 关键词：fully animated、React、Tailwind CSS、Motion、shadcn CLI
- 推荐度：★★★★☆
- 适合快速给页面加入动效组件。

### SyntaxUI

- GitHub: https://github.com/SyntaxUI/syntaxui
- 关键词：Tailwind、Framer Motion、pre-built components、effects
- 推荐度：★★★☆☆
- 适合补充小型动效组件。

### shadcn/ui

- GitHub: https://github.com/shadcn-ui/ui
- 关键词：open code、accessible、copy-paste components
- 推荐度：★★★★☆
- 备注：本身不是炫酷风格，但适合作为底层组件体系；需要搭配 Magic UI / React Bits / nyxb-ui 才更有动效。

---

## C. Vue / Nuxt：接近 Muse UI 或更现代的方向

### Varlet

- GitHub: https://github.com/varletjs/varlet
- 关键词：Vue 3、Material Design 2/3、mobile + desktop
- 推荐度：★★★★★
- 备注：如果喜欢 Muse UI，这个优先看。

### Inspira UI

- GitHub: https://github.com/unovue/inspira-ui
- 关键词：Vue、Nuxt、beautiful website、animated UI
- 推荐度：★★★★☆
- 适合官网、Landing Page、AI 产品页。

### Spark UI

- GitHub: https://github.com/selemondev/spark-ui
- 关键词：Vue、TypeScript、Tailwind CSS、VueUse Motion、animated components
- 推荐度：★★★★☆
- 适合 Vue 动效组件补充。

### Naive UI

- GitHub: https://github.com/tusen-ai/naive-ui
- 关键词：Vue 3、TypeScript、theme customizable、dark mode
- 推荐度：★★★★☆
- 适合完整应用、工具后台；视觉比传统后台库更现代。

### Nuxt UI

- GitHub: https://github.com/nuxt/ui
- 关键词：Nuxt、Vue、Tailwind、Reka UI
- 推荐度：★★★★☆
- 适合 Nuxt 项目，风格干净现代。

### shadcn-vue

- GitHub: https://github.com/unovue/shadcn-vue
- 关键词：Vue port of shadcn-ui
- 推荐度：★★★☆☆
- 备注：默认不算动态，但适合高度定制。

---

## D. 动效 / 交互增强库

### Motion

- GitHub: https://github.com/motiondivision/motion
- 用途：React / JavaScript 动效核心库。
- 适合：页面转场、组件入场、滚动动效、微交互。

### Auto Animate

- GitHub: https://github.com/formkit/auto-animate
- 用途：React / Vue / 原生 JS 都可用的零配置布局动画。
- 适合：列表、卡片、表单、布局变化。

### Number Flow

- GitHub: https://github.com/barvian/number-flow
- 用途：数字滚动动画。
- 适合：指标卡、仪表盘、价格、销量、增长率。

### React Three Fiber

- GitHub: https://github.com/pmndrs/react-three-fiber
- 用途：React 里的 Three.js。
- 适合：3D 首屏、空间感展示、创意视觉。

---

## E. 好看的图表 / 数据可视化仓库

### Apache ECharts

- GitHub: https://github.com/apache/echarts
- 类型：通用图表与可视化库。
- 适合：复杂仪表盘、大屏、地图、交互图表。
- 推荐度：★★★★★

### vue-echarts

- GitHub: https://github.com/ecomfe/vue-echarts
- 类型：Vue 里的 ECharts 组件。
- 适合：Vue / Nuxt 项目。
- 推荐度：★★★★★

### Nivo

- GitHub: https://github.com/plouc/nivo
- 类型：React + D3 图表组件。
- 适合：默认就比较漂亮的产品图表。
- 推荐度：★★★★☆

### ApexCharts

- GitHub: https://github.com/apexcharts/apexcharts.js
- 类型：SVG 交互图表。
- 适合：SaaS 仪表盘、产品数据页。
- 推荐度：★★★★☆

### Recharts

- GitHub: https://github.com/recharts/recharts
- 类型：React 常用图表库。
- 适合：快速做常规图表。
- 推荐度：★★★☆☆

### visx

- GitHub: https://github.com/airbnb/visx
- 类型：Airbnb 可视化组件。
- 适合：高度自定义的设计型图表。
- 推荐度：★★★★☆

### AntV G2

- GitHub: https://github.com/antvis/G2
- 类型：可视化语法。
- 适合：复杂商业可视化、自定义图表。
- 推荐度：★★★★☆

### AntV G6

- GitHub: https://github.com/antvis/G6
- 类型：图关系 / 网络关系可视化。
- 适合：知识图谱、流程图、关系网络。
- 推荐度：★★★★☆

### TradingView Lightweight Charts

- GitHub: https://github.com/tradingview/lightweight-charts
- 类型：金融行情图、K 线、时间序列。
- 适合：金融、价格、趋势类页面。
- 推荐度：★★★★☆

### deck.gl

- GitHub: https://github.com/visgl/deck.gl
- 类型：WebGL 地理空间可视化。
- 适合：地图、大规模地理数据、城市/物流/空间数据展示。
- 推荐度：★★★★☆

### sigma.js

- GitHub: https://github.com/jacomyal/sigma.js
- 类型：WebGL 网络图。
- 适合：节点关系图、大规模图谱。
- 推荐度：★★★★☆

---

## F. 下次选型建议

### 做 React 官网 / AI 产品页

优先组合：

```text
React Bits + Magic UI + nyxb-ui + Motion
```

如果需要完整基础 UI：

```text
HeroUI + shadcn/ui + React Bits / Magic UI
```

### 做 Vue / Nuxt 官网

优先组合：

```text
Varlet + Inspira UI + Spark UI + Auto Animate
```

如果偏应用型：

```text
Naive UI + Nuxt UI + vue-echarts
```

### 做数据展示页 / Dashboard

React：

```text
Nivo / ApexCharts / ECharts / visx
```

Vue：

```text
vue-echarts / ECharts / ApexCharts
```

---

## G. 注意事项

- 不要一开始就安装全套库，先按页面风格挑 1 个基础 UI + 1 个动效组件来源 + 1 个图表库。
- shadcn 系列默认偏“干净”，不是天然炫酷；需要搭配 Magic UI、React Bits、nyxb-ui、Motion 才更有记忆点。
- Vue 如果要 Muse UI 的 Material 感，优先看 Varlet。
- 官网类项目要避免传统 Admin 模板感，少用默认表格/后台布局，多用动效卡片、滚动叙事、指标动画、交互图表。