patrick-xin/lumi-ui

一套基于 Base UI 构建、使用 Tailwind CSS 设计样式，兼具无障碍访问性和高度可定制性的 React 组件集合。让你真正拥有组件，掌控你的设计系统。

简体中文 | English | 官网

什么是 Lumi UI？

Lumi UI 为你提供开箱即用的 React 组件，并有一个独特的设计：每个组件都提供两种形态。

• 组合组件 - 预先组装好的组件，助你快速开发。
• 基础组件 - 细粒度的构建块，让你完全掌控。

从组合组件开始快速搭建，当需要自定义布局时再深入使用基础组件。无需妥协。

为什么选择 Lumi UI？

• 内置无障碍支持 - ARIA、键盘导航和焦点管理等复杂逻辑均由 Base UI 处理。
• 完整的代码所有权 - 将组件复制到你的项目中，可自由修改。
• 双层次架构 - 在速度（组合组件）与控制力（基础组件）之间自由选择。
• 对 AI 友好 - 扁平的导出和清晰的模式，为 AI 辅助开发而优化。
• 主题化 - 采用 shadcn/ui 的 CSS 变量系统，轻松定制主题。
• TypeScript - 完整的类型定义，提供优秀的 IntelliSense 支持。

核心理念

命中测试哲学

交互区域是宽容的。我们使用伪元素将视觉高亮层与可点击区域分离，从而创造更自然的用户体验。

AI 辅助开发

扁平的语义化导出以及组合组件作为“活文档”，帮助 AI 助手在第一次尝试时就能生成正确、地道的代码。

统一的设计语言

跨所有组件共享的动画工具类与一致的交互模式。

文档

• 📚 完整文档
• 🧩 组件画廊
• 🎨 主题
• 🏗️ 架构与设计理念
• 📦 安装指南

贡献指南

我们欢迎任何形式的贡献！无论是：

• 🐛 提交 Bug 报告或修复
• 💡 提出功能请求或实现新功能
• 📖 改进文档
• 🎨 设计新的主题或组件变体

许可证

本项目基于 MIT 许可证开源。详见 LICENSE 文件。

致谢

• Base UI: 提供了构成 Lumi UI 基石的无障碍、无样式的基础组件。
• shadcn/ui: 其架构模式与开发者体验为我们带来了重要灵感。
• Fumadocs: 为我们构建网站提供了卓越的文档框架。

准备好开始构建了吗？请从 安装指南 开始。