返回首页

hulianui

颜值 + 好用的 React 设计系统

React 19TypeScriptTailwind v4设计系统开源

名出《论语·公冶长》「瑚琏也」——宗庙里盛黍稷的玉器,至贵至美又确有大用。这也是这套库的赌注:颜值和好用不是装饰,是生产力,人不该油头满面地对着丑软件干活。

结构上分两层:行为层交给 Base UI,键盘、焦点、ARIA 开箱即用;皮肤层是 Tailwind v4 上的两层 OKLCH token(原始层 + 语义层),颜色、阴影、发丝边、圆角全部走语义值——明暗切换 0 闪烁,主题能在运行时换,组件一行不用改。

眼下 376 个组件、57 个可复制区块、20 套整页模板,覆盖中后台、营销站、电商、AI 应用、移动端,全部被 19 个真实业务 demo(CRM / 商城 / 数据大屏 / 直播 / AI 工作流……)和这个站本身反向打磨出来。已经发在公共 npm,pnpm add @hulianui/ui 就能装。

亮点

两层 OKLCH token

原始层 + 语义层,颜色/阴影/发丝边/圆角全走语义值,暗色 0 闪烁、运行时可换肤。

376 个组件

外加 57 个区块与 20 套整页模板,从原语到 AdminLayout / ProTable / 节点画布一应俱全。

无障碍不是补丁

行为层基于 Base UI,键盘、焦点、ARIA 开箱即用,皮肤层只管好看。

源码分发

发 TSX 源码而非编译产物,样式能被你的 Tailwind 完整接管,没有黑盒 CSS。

真实场景驱动

19 个业务 demo 加本站这样的真站点反复验证,不是靠 storybook 想象出来的 API。

为 AI 准备的

官方 MCP server 让 AI 按需查真实 props,配 AST 级约定门禁改完复验,不靠猜。