ui-library-selectorlisted

# UI Library Selector（UI 库选型） > 来源：Emil Kowalski `pick-ui-library`。这是查阅技能——被显式调用时，把任务映射到下方精选清单并推荐。不自行触发。 ## 用法 1. **识别任务**，不是用户点名的库。「我要个下拉」是 UI 原语任务（base-ui），即便他问的是别的。 2. **先看装了什么**。先查 `package.json`；项目已用清单内某库就用它。若装的是竞品（如 react-window 而非 Virtuoso），标记推荐但别未经询问就换依赖。 3. **推荐一个库**，一句话说明用途，若请求包含就装/接。清单有明确答案时别给菜单式选项。 4. 任务不在清单内 ��� 明说，并用自己知识推荐；但要讲清已离开精选清单。 ## 精选清单 ### UI 组件与原语 | 任务 | 库 | | --- | --- | | 无样式、无障碍 UI 组件（dialog/popover/menu/select…） | [base-ui](https://base-ui.com) | | 命令菜单（⌘K 面板） | [cmdk](https://cmdk.paco.me) | | Toast / 通知 | [Sonner](https://sonner.emilkowal.ski) | | 一次性密码 / 验证码输入 | [input-otp](https://input-otp.rodz.dev) | | 可定制 GUI / 控制面板 | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) 备选 | ### 动效与视觉 | 任务 | 库 | | --- | --- | | 通用动画（弹簧/布局动画/进/出） | [motion](https://motion.dev)（Framer Motion） | | 数字动画（计数器/价格/统计） | [NumberFlow](https://number-flow.barvian.me) | | 动画文本组件 | [torph](https://torph.lochie.me/) | | 3D 地球 | [Cobe](https://cobe.vercel.app) | | 动态 OG 图（HTML/CSS → SVG/PNG） | [Satori](https://github.com/vercel/satori) | | 语法高亮 | [shiki](https://shiki.style) | 需要弹簧/布局动画/出场/手势驱动值时用 motion。简单 hover 或 fade 不需要它——纯 CSS transition 才是那处的对工具。 ### 图表 | 任务 | 库 | | --- | --- | | 实时/流式图表 | [Liveline](https://github.com/benjitaylor/liveline) | | 通用图表（静态或交互仪表盘） | [recharts](https://recharts.org) | 切分：数据点实时到达、图表随时间滚动 → Liveline；其余都 recharts。 ### 交互与性能 | 任务 | 库 | | --- | --- | | 拖拽 | [dnd kit](https://dndkit.com) | | 虚拟列表（长列表/大表