Cadenza
EN
Base UI 行为 × shadcn 外观

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 就渲染完整的默认组合;要定制某一层时,再换成组合式写法。

从这里开始