欢迎来到 Lumi UI
一套基于 Base UI 和 Tailwind CSS 构建的 React 组件库。它不仅提供了无障碍、高度可定制的组件，更重要的是——代码所有权完全属于你。
我们设计的初衷是为了清晰、高效以及完全的代码掌控。
你将得到什么
每一个 Lumi UI 组件都提供两种形态，让你可以在快速交付和极致定制之间自由选择：
复合组件 —— 像用精装家具一样快
预装好的、生产就绪的组件，涵盖了常见的 UI 模式。当你需要快速搭建标准界面时，直接复制粘贴即可。
适合场景：
- 原型验证（Prototyping）
- 搭建标准化界面
- 维护全站的 UI 一致性
基础组件 —— 像用 Lego 搭建一样自由
这是 Base UI 的底层积木。当你需要完全掌控结构、布局，或者实现独一无二的自定义交互时，它们是你的最佳选择。当然，你也可以混用原始组件和复合组件来创造独特的布局。
适合场景：
- 构建独特、非标准的布局
- 实现高度定制的交互逻辑（如复杂的快捷键操作）
- 当复合组件无法满足你的特定需求时
打个比方： 复合组件是“精装家具”，买来就能用，省时省力。 原始组件是“木材和工具”，你需要自己动手，但能造出独一无二的艺术品。 建议：先用“家具”把架子搭起来，当需要“定制细节”时，再拿起工具深入底层。
Lumi是如何设计的
无障碍访问？已内置
所有复杂的键盘导航、焦点管理、ARIA 属性和状态逻辑，Base UI 都已为你妥善处理。你无需成为无障碍专家，也能写出符合 WCAG 标准的企业级应用。
用 Tailwind CSS 自由定义
每个组件都支持标准的 className 属性。我们沿用了 shadcn/ui 的 CSS 变量系统，这意味着你只需要修改全局的主题变量，就能一键更新所有组件的样式。
统一的设计语言
- 动画体系： 部分组件共享统一的动画工具（如
animate-popup,animate-dialog），确保过渡效果丝滑一致。 - 交互体验： 组件遵循我们的点击测试模式，确保可点击区域足够大且宽容。
- 主题系统： 我们在主题中提供了预配置的主题方案，开箱即用。
定制的四种深度
你可以根据需求，选择任意层级的定制方式：
- 微调： 修改复合组件的样式和布局，或者直接通过
className添加 Tailwind 类名。 - 换肤： 在
globals.css中修改 CSS 变量。 - 完全掌控： 使用原始组件从零开始构建你想要的任何东西。
- 混合创作： 同时使用原始组件和复合组件，创造独特的组合。
核心约定
为了保持代码的清晰和可预测性，我们遵循以下命名约定：
命名规律：
- 根组件：
Combobox,Dialog,Dropdown - 基础组件：
ComboboxInput,ComboboxItem,DialogPopup - 复合组件：
ComboboxInputGroup,ComboboxContent,DialogContent。 - 复合组件以
// Composite components标注。
Props 透传模式： 所有的原始组件都会将 Props 透传给底层的 Base UI，这意味着你在使用 Lumi UI 组件时，拥有完整的 Base UI API 能力，再加上我们的样式系统。