Svelte 党想要 headless 自由：Melt UI 用 action 拼装，无障碍与状态都管好了
React 圈 headless 库不少，Svelte 这边过去选择偏少。Melt UI 就是给 Svelte 量身做的 headless 组件原语：用 use:melt 这种 action 把行为挂到你的元素上，状态、键盘、aria 它全包了，外观依旧是你自己的。
它解决什么问题
Svelte 项目找不到趁手的 headless 组件，只能自己写。
手搓下拉、对话框的无障碍逻辑，键盘与焦点总出岔子。
想要组件但讨厌被预设样式绑住，改起来费劲。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| Svelte 原生 | 用 use:melt action 挂载行为，契合 Svelte 写法 |
| Headless 思路 | 只给交互与状态，外观由你完全掌控 |
| 无障碍就绪 | 键盘导航、aria 属性按规范内置处理 |
| 状态可存取 | 暴露 store，组件状态随时读取与联动 |
| 组合灵活 | 零件可拆可合，按场景拼出所需组件 |
| 开源可查 | MIT 协议开源，源码公开便于排查问题 |
它把「行为」做成可挂载的 action
Melt UI 的核心玩法是 action：你写一段普通的 Svelte 标记，再用 use:melt={…} 把一个 builder 挂上去，组件就获得了开合、聚焦、键盘等完整行为。状态通过 store 暴露，所以你既能用官方给的渲染，也能自己接管渲染，自由度比「传入 children」的组件高。
和 Ark UI 类似，它的卖点是「交逻辑不交皮肤」，所以你得自己把样式做完。它是库（npm 安装），跟随依赖升级；目前聚焦 Svelte 生态，不跨框架。对已经用 Svelte、又不想被 UI 库样式绑死的团队很合适。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Ark UI | 开源免费 | 多框架 headless，含 Solid/Vue，但 Svelte 支持在跟进。 |
| Radix UI | 开源免费 | React 专用 headless 原语，生态成熟。 |
| Svelte Headless UI | 开源免费 | Tailwind 团队的 Svelte 版，样式约定更紧。 |
谁适合用
- 用 Svelte 开发、需要 headless 组件的前端
- 想保留自有设计语言、只借交互逻辑的团队
- 对无障碍有硬性要求的 Svelte 项目
怎么开始
- 用包管理器安装 @melt-ui/svelte。
- 在组件里 import 需要的 builder（如下拉、对话框）。
- 用 use:melt 把行为挂到自己的元素上。
- 读 store 接好状态与回调，处理开合等逻辑。
- 给元素写自己的样式并走查键盘操作。
常见问题
依赖 Tailwind 吗？
不依赖。Melt UI 是 headless，样式随你用任何方案。
是装库还是复制源码？
是装库，通过 npm 引入，随依赖升级。
支持 React 或 Vue 吗？
不支持，它专注 Svelte 生态，跨框架请选别的库。
能商用吗？
能。以 MIT 开源协议发布，可自由用于商业项目。
授权与合规
Melt UI 以 MIT 开源协议发布，源码公开，可自由用于商业与个人项目。 官网：melt-ui.com。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
