AigenUI - AI 应用专用 Tailwind CSS UI

项目简介

AigenUI 是一款专为AI应用场景打造的UI片段展示站点，专注提供轻量化、可直接复用的前端组件代码。项目基于现代化技术栈构建，支持在线预览、分类检索、一键复制源码，无额外组件运行时依赖，开箱即用，适合快速搭建AI产品界面、后台面板、交互模块。

整体支持明暗主题切换与中英文国际化，结构清晰易扩展，可快速新增自定义组件，是AI应用前端开发的高效工具库。

技术栈

  • 框架：Next.js 15、React 19、TypeScript
  • 样式：Tailwind CSS 4
  • 功能：next‑themes 明暗主题、LanguageProvider 中英文国际化
  • 特性：无额外组件运行时依赖、纯代码片段复用

快速本地运行

npm install
npm run dev

浏览器访问 http://localhost:3030 即可预览完整站点。

常用脚本命令

命令 说明
npm run dev 开发模式启动
npm run build 生产环境构建
npm run start 启动生产服务
npm run lint ESLint 代码检查

目录结构说明

  • src/app/：页面路由，包含首页、分类页、组件详情页
  • src/components/：导航栏、组件预览、代码弹窗等公共UI
  • src/lib/：组件数据、分类配置、国际化语言字典

新增自定义组件

在 src/lib/components‑data.ts 的 components 数组中添加对应条目，配置参数如下：

  • id：组件唯一标识
  • name：组件名称
  • description：组件描述
  • category：所属分类
  • tags：标签
  • preview：预览标识（与 ComponentPreview 中key对应）
  • code：展示与复制的源码字符串

配置完成后即可在站点中自动展示、预览与复制使用。

项目亮点

  1. 专为AI应用场景设计，组件贴合大模型交互、智能问答、数据展示等场景
  2. 纯Tailwind CSS实现，无第三方UI库运行依赖，轻量化易部署
  3. 支持主题切换+多语言，适配国内外AI产品开发
  4. 结构标准化，新增组件简单，可快速扩展为私有组件库