起步

介绍

@xingxingmofashu/ui 是一套采用 Liquid Glass 视觉风格的类型化 React 组件库,面向 React 19 与 Tailwind CSS 4。

@xingxingmofashu/ui 当前为 0.2.x。1.0 之前 API 仍可能变化;请锁定版本,并在升级时查看 版本发布记录。

什么是 @xingxingmofashu/ui?

@xingxingmofashu/ui 是一套采用纯 CSS 实现 Liquid Glass 视觉风格的 React 组件库。它提供二十五个组件,覆盖基础元素、表单控件、浮层与反馈,可运行在任何使用 Tailwind CSS 4 的 React 19 应用中。

玻璃表面、边缘高光、内阴影与按下滑块全部由 CSS 绘制。交互行为内置于组件,样式则由 Tailwind Variants 保持类型化与可组合。

如果你正在使用 Tailwind CSS 构建 React 项目,并且想要一套有辨识度的黑白 Liquid Glass 视觉,@xingxingmofashu/ui 是一个合适的选择。它提供 Button、Card、Dialog、Drawer、Toast 等高层组件,同时允许通过 className、按 data-slot 组织的 ui 槽位与共享的 --ui-* token 定制。

开发者体验优先

直观的组件 API、类型化属性、深层导入与双语文档。

默认好看

黑白 Liquid Glass 材质在明暗主题下保持一致。

类型化槽位

槽位名称与尺寸从 Tailwind Variants 配方推导,覆盖项保持类型检查。

聚焦的组件范围

二十五个精心打磨的组件,而不是庞大的组件目录,尺寸、命名与视觉语言保持一致。

核心技术

@xingxingmofashu/ui 建立在两块基础之上:Tailwind CSS 负责样式,Tailwind Variants 负责类型化变体。交互行为内置于每个组件。

  • CSS-first 配置:主题 token 直接写在 CSS 中
  • 现代 Web 特性:color-mix、容器单位、:has 与独立 transform
  • 源码扫描:包样式表会扫描自己的组件文件,无需额外添加 @source

主要特性

FAQ

继续阅读