Cadenza
Base UI 负责行为与无障碍,Tailwind + cva 负责外观。
33 个组件、一套 base-nova token、每个文档页都能打开的主题编辑器。键盘交互与 ARIA 语义交给 Base UI,样式留给你改。
安装
pnpm add @gedatou/cadenza-ui
styles.css 自带 @source,Tailwind 会自动扫描组件用到的类名,无需额外配置。
这些不是截图
下面每块都是跑在这一页上的真组件,点标题看完整用法。
为什么是这套
行为交给 Base UI
键盘导航、焦点管理、ARIA 语义全部由 Base UI 托管,组件层只决定长什么样。
className 双形态
落在 Base UI 槽位上的 className 可以是字符串,也可以是 (state) => string;组件页的状态表就是那个参数的字典。
主题实时可编辑
右下角的调色盘按钮每个文档页都在,亮暗两套 token 分开调,改完导出成 CSS 直接引进项目。
一行起步,需要时再拆开
不写 children 就渲染完整的默认组合;要定制某一层时,再换成组合式写法。