SuperAPI AI 工具集

ui-sdk

前端与建站

查看项目

更新于 11-12 23:00

技能介绍

ui-sdk 是一个专注于 UI 行为的库,而非视觉组件库。它提供键盘导航、焦点管理、选择、关闭、弹窗、拖放等交互行为以及这些行为所需的 ARIA 属性。其组件由这些行为构建而成,自身不渲染任何样式,并同时支持 React、Vue、Svelte、Solid 和 Web Components 五种框架。

主要能力:

  • 提供一组内置组件,涵盖选择、弹窗、命令面板等常见交互模式。
  • 组件不附带样式,样式可通过 @ui-sdk/core/web.css 获得可选的默认外观。
  • 当内置组件不满足需求时,可基于 @ui-sdk/core 中的行为自定义组件,并自动继承键盘、焦点、服务端渲染和从右到左布局支持。

使用方式:

  • 若项目中尚未安装 @ui-sdk 包,需使用项目的包管理器安装 @ui-sdk/core 及对应框架包。
  • 每个组件有独立入口,例如 @ui-sdk/react/select,不支持从框架包根入口导入。
  • 文档以 Markdown 形式随包提供,位于 node_modules/@ui-sdk/<framework>/docs/llms.txt,应先阅读该索引,再按需阅读具体页面。
  • 无需构建步骤的页面(如 Artifact)可直接通过两个标签加载 https://ui-sdk.dev/web.js 和 web.css,并阅读 https://ui-sdk.dev/web.md。
  • 开发时应遵循组件组合方式,使用 defaultValue 或 value 与 onValueChange 控制状态,为每个控件命名(使用组件的 label 部分或 aria-label),通过 data-slot 和状态属性进行样式定制,并在全局样式表中声明 @layer ui-sdk。
  • 需注意颜色对比度(文本 4.5:1,控件边缘等 3:1),列表键应基于值或 id 而非索引,从右到左布局无需额外 Provider。
  • 避免手写已提供的角色属性(如 role="listbox"、"menu" 等),应优先使用内置组件。

适用场景:

  • 需要构建设置页、表单、命令面板等界面的前端项目。
  • 需要跨框架(React、Vue、Svelte、Solid、Web Components)复用 UI 行为。
  • 需要自定义组件但希望保留无障碍和交互行为的场景。

限制:

  • 组件本身无样式,需自行提供样式或使用可选的默认样式。
  • 文档体积较大,需按需阅读而非全量阅读。
  • 具体收费、价格等信息暂未提供。