介绍

Cadenza 是基于 Base UI 的组件库：行为、键盘交互与无障碍语义 全部交给 Base UI，外观沿用 shadcn（base-nova 预设）的 Tailwind + cva 体系。

安装#

复制pnpm add @gedatou/cadenza-ui
pnpm add -D tailwindcss tw-animate-css

在你的入口 CSS 里：

复制@import "tailwindcss";
@import "@gedatou/cadenza-ui/styles.css";

styles.css 自带 @source "./dist"，Tailwind 会自动扫描到组件用到的类名，无需额外配置。

从哪里开始#

• Button —— 按钮与链接按钮，cva 变体 / 尺寸体系，pending 自带 Spinner
• Spinner —— role="status" 的加载指示，尺寸颜色全走 className
• LoadingOverlay —— 区域级磨砂加载覆盖层，铺满最近的 relative 父容器
• DataTable —— 列定义驱动的数据表格：排序、行选择、固定列、分页、无限滚动、虚拟化、列选择器（显隐 + 拖拽排序）
• InfiniteSelect / InfiniteCombobox —— 无限滚动下拉选择：搜索、多选、跨页存档、组合式插槽。基座面板与弹层便利层同一页
• DataPagination —— offset 分页条：page / limit 独立受控、零文案设计
• SearchField —— 带去抖查询的搜索字段，value / queryValue 双值拆分
• Select —— 组合式下拉选择：单选/多选、分组、动态集合，标签走 Field
• Cascader —— 级联选择器：树形选项逐级子菜单展开，值是从根到叶的一条路径；分步异步加载、滚动分页、虚拟化
• Field —— 表单字段的布局家族：标签、描述、错误、编组、分隔，纯 DOM、控件无关
• InputGroup —— 图标、文本、按钮与输入框共处一个边框，焦点环画在整组上
• ScrollArea —— 覆盖式滚动条的滚动容器，与 scroll-fade 渐隐天然兼容
• Tabs —— 组合式 TabsTab / TabsPanel，键盘导航与配对全托管，外加会跟着悬停与焦点滑动的指示器
• useControllableState —— 受控/非受控双模的统一实现

落在 Base UI 槽位上的 className 全库支持双形态 —— 字符串，或 (state) => string 的状态函数；各组件页的状态表就是函数参数的字典。 落到纯 DOM 元素上的则老实收窄成字符串，那些地方走 data-* 属性改样式。