# FutureBirdUI

**Repository Path**: futurebird/future-bird-ui

## Basic Information

- **Project Name**: FutureBirdUI
- **Description**: 未来鸟FutureBird组件库预览平台是未来鸟平台内部使用工具，可快速预览各类组件库样式，助力项目选型决策。
目前已有15 个组件库，7714+ 组件样式展示和预览。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-24
- **Last Updated**: 2026-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FutureBird 组件库预览平台

> **一站式预览 15+ 主流组件库** | 助力项目技术选型决策

[![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=next.js)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

🌐 **官方演示**: [https://ui.weilainiao.com](https://ui.weilainiao.com)

---

## 项目简介

在开发项目时，需要了解各个组件库的组件样式和功能，以便做出最佳选择。本项目提供一个一站式的组件库预览平台，让开发者能够快速浏览和对比 15+ 主流组件库的组件。

### 核心特性

- **一站式预览**: 支持 15+ 主流 React/Vue 组件库
- **实时交互**: 组件可点击、可操作、可预览效果
- **代码示例**: 每个组件附带使用代码
- **全局搜索**: 快速搜索组件库和具体组件
- **暗色模式**: 支持亮色/暗色主题切换
- **响应式设计**: 完美适配桌面和移动设备

### 📚 文档资源

- [📘 Wiki 文档](https://gitee.com/futurebird/future-bird-ui/wikis) - 详细使用指南和开发文档
- [📝 更新日志](./CHANGELOG.md) - 版本更新记录

---

## 支持的组件库

### React 生态 (10个)

| 组件库 | 版本 | GitHub Star | 特点 | 官网 |
|--------|------|-------------|------|------|
| **shadcn/ui** | latest | 65k+ | 完全可定制、代码复制 | [ui.shadcn.com](https://ui.shadcn.com) |
| **Ant Design** | 6.3.3 | 90k+ | 企业级、组件最丰富 | [ant.design](https://ant.design) |
| **Material UI** | 7.3.9 | 92k+ | Google Material Design | [mui.com](https://mui.com) |
| **Chakra UI** | 3.34.0 | 37k+ | 简洁易用、无障碍优先 | [chakra-ui.com](https://chakra-ui.com) |
| **Mantine** | 8.3.18 | 25k+ | Hooks丰富、功能全面 | [mantine.dev](https://mantine.dev) |
| **NextUI** | 2.6.11 | 21k+ | 现代美观、动画丰富 | [nextui.org](https://nextui.org) |
| **Arco Design** | 2.66.12 | 5k+ | 字节跳动出品、轻量高性能 | [arco.design](https://arco.design) |
| **Semi Design** | 2.93.0 | 8k+ | 抖音出品、设计精良 | [semi.design](https://semi.design) |
| **DaisyUI** | 5.5.19 | 33k+ | Tailwind 插件、主题丰富 | [daisyui.com](https://daisyui.com) |
| **Radix UI** | latest | 16k+ | 无样式原语、无障碍基础 | [radix-ui.com](https://radix-ui.com) |

### Vue 生态 (5个)

| 组件库 | 版本 | GitHub Star | 特点 | 官网 |
|--------|------|-------------|------|------|
| **Element Plus** | latest | 24k+ | Vue 3 企业级首选 | [element-plus.org](https://element-plus.org) |
| **Ant Design Vue** | latest | 20k+ | Ant Design Vue版 | [antdv.com](https://antdv.com) |
| **Vuetify** | latest | 39k+ | Material Design | [vuetifyjs.com](https://vuetifyjs.com) |
| **Naive UI** | latest | 16k+ | Vue 3 + TypeScript | [naiveui.com](https://naiveui.com) |
| **Vant** | latest | 46k+ | 移动端首选 | [vant-ui.github.io](https://vant-ui.github.io) |

---

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 9+

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
# 启动开发服务器
未来鸟FutureBird CLI: pnpm dev
```

启动后访问 [http://localhost:5000](http://localhost:5000)

### 构建生产版本

```bash
pnpm build
```

### 启动生产服务器

```bash
pnpm start
```

---

## 项目结构

```
src/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # 根布局
│   ├── page.tsx                 # 首页
│   ├── globals.css              # 全局样式
│   │
│   ├── shadcn/                  # shadcn/ui 组件库
│   │   ├── layout.tsx           # 专用布局
│   │   ├── button/page.tsx      # 按钮组件页
│   │   └── ...                  # 其他组件页
│   │
│   ├── antd/                    # Ant Design 组件库
│   │   ├── layout.tsx
│   │   └── ...
│   │
│   ├── mui/                     # Material UI 组件库
│   ├── chakra/                  # Chakra UI 组件库
│   ├── mantine/                 # Mantine 组件库
│   ├── nextui/                  # NextUI 组件库
│   ├── arco/                    # Arco Design 组件库
│   ├── semi/                    # Semi Design 组件库
│   ├── daisyui/                 # DaisyUI 组件库
│   ├── radix/                   # Radix UI 组件库
│   │
│   ├── element/                 # Element Plus (Vue)
│   ├── vant/                    # Vant (Vue)
│   ├── antdv/                   # Ant Design Vue (Vue)
│   ├── vuetify/                 # Vuetify (Vue)
│   └── naive/                   # Naive UI (Vue)
│
├── components/
│   ├── ui/                      # shadcn/ui 基础组件
│   ├── layout/                  # 布局组件
│   │   ├── Header.tsx           # 顶部导航
│   │   └── LibraryTabBar.tsx    # 组件库选项卡
│   └── shared/                  # 共享组件
│       ├── SearchDialog.tsx     # 搜索弹窗
│       └── ThemeToggle.tsx      # 主题切换
│
├── data/                        # 静态数据
│   ├── search-data.ts           # 全局搜索数据
│   ├── shadcn-categories.ts     # shadcn/ui 分类
│   ├── antd-categories.ts       # Ant Design 分类
│   └── ...                      # 其他组件库分类
│
├── hooks/                       # 自定义 Hooks
├── lib/                         # 工具函数
└── types/                       # 类型定义
```

---

## 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| **框架** | Next.js | 16.1.1 |
| **语言** | TypeScript | 5.x |
| **样式** | Tailwind CSS | 4.x |
| **UI 组件** | shadcn/ui | latest |
| **状态管理** | Zustand | - |
| **主题** | next-themes | 0.4.6 |
| **图标** | Lucide React | 0.468.0 |
| **动画** | Framer Motion | 12.x |
| **表单** | React Hook Form + Zod | - |
| **包管理器** | pnpm | 9.0.0+ |

---

## 核心功能

### 1. 全局搜索

支持搜索组件库和具体组件：

- 按 `Cmd/Ctrl + K` 打开搜索
- 支持中英文组件名称搜索
- 支持组件库名称搜索
- 搜索结果按相关度排序

### 2. 主题切换

支持亮色/暗色模式：

- 自动跟随系统主题
- 手动切换主题
- 主题状态持久化

### 3. 组件预览

每个组件页面包含：

- 组件样式展示
- 多种变体预览
- 代码示例
- 复制代码功能

---

## 开发指南

### 添加新组件库

1. 在 `src/app/` 下创建组件库目录
2. 创建 `layout.tsx` 定义专用布局
3. 创建组件页面 `xxx/page.tsx`
4. 在 `src/data/` 下创建分类数据
5. 更新 `search-data.ts` 添加搜索支持

### 添加新组件页面

```tsx
// src/app/[library]/[component]/page.tsx
'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export default function ComponentPage() {
  return (
    <div className="p-6 lg:p-8 space-y-8">
      <div>
        <h1 className="text-2xl font-bold mb-2">组件名称</h1>
        <p className="text-muted-foreground">组件描述</p>
        <Badge variant="outline" className="mt-2">框架标签</Badge>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">组件展示</CardTitle>
        </CardHeader>
        <CardContent>
          {/* 组件预览 */}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">代码示例</CardTitle>
        </CardHeader>
        <CardContent>
          <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
            {/* 代码 */}
          </pre>
        </CardContent>
      </Card>
    </div>
  );
}
```

### 代码规范

- 使用 TypeScript 编写所有代码
- 组件使用 `'use client'` 指令
- 使用 `@/` 路径别名导入模块
- 遵循 ESLint 规则

---

## 页面统计

| 组件库 | 页面数量 | 状态 |
|--------|----------|------|
| shadcn/ui | 50+ | ✅ |
| Ant Design | 35+ | ✅ |
| Material UI | 25+ | ✅ |
| Chakra UI | 15+ | ✅ |
| Mantine | 20+ | ✅ |
| NextUI | 15+ | ✅ |
| Arco Design | 25+ | ✅ |
| Semi Design | 20+ | ✅ |
| DaisyUI | 15+ | ✅ |
| Radix UI | 18+ | ✅ |
| Element Plus | 20+ | ✅ |
| Vant | 10+ | ✅ |
| Ant Design Vue | 15+ | ✅ |
| Vuetify | 15+ | ✅ |
| Naive UI | 15+ | ✅ |
| **总计** | **300+** | ✅ |

---

## 相关文档

- [📘 Wiki 文档](https://gitee.com/futurebird/future-bird-ui/wikis) - 项目 Wiki 文档
- [📝 更新日志](./CHANGELOG.md) - 版本更新记录
- [📐 设计文档](./docs/COMPONENT_LIBRARY_PREVIEW_DESIGN.md) - 详细设计方案
- [Next.js 官方文档](https://nextjs.org/docs)
- [shadcn/ui 组件文档](https://ui.shadcn.com)
- [Tailwind CSS 文档](https://tailwindcss.com/docs)

---

## 贡献指南

欢迎提交 Issue 和 Pull Request！

### 提交规范

遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 代码重构
- `perf`: 性能优化

---

## 许可证

本项目采用 [MIT License](LICENSE) 开源协议。

本项目依赖多个开源组件库，所有依赖项的许可证信息详见 [NOTICE](NOTICE) 文件。

### 主要依赖组件库

所有组件库均采用 MIT 协议，允许商业使用：

- **React 生态**: shadcn/ui, Ant Design, Material UI, Chakra UI, Mantine, NextUI, Arco Design, Semi Design, DaisyUI, Radix UI
- **Vue 生态**: Element Plus, Ant Design Vue, Vuetify, Naive UI, Vant

---

## 致谢

感谢以下开源项目：

- [Next.js](https://nextjs.org/)
- [shadcn/ui](https://ui.shadcn.com)
- [Ant Design](https://ant.design)
- [Material UI](https://mui.com)
- 以及所有支持的组件库