Svelte 5 用户换组件库：Bits UI 用 runes 重写，无样式原语随你塑形
Svelte 5 把响应式换成了 runes，旧组件库不一定跟得上。Bits UI 是面向 Svelte 5 重写的一整套无样式（unstyled）组件原语，覆盖对话框、下拉、标签页等常见件，行为齐备、外观交给你，适合想在 Svelte 5 上从零搭 UI 的团队。
它解决什么问题
升级到 Svelte 5 后，旧组件库不兼容或表现异常。
想要一套覆盖全的无样式组件，省得逐个手搓。
怕组件库把样式定死，品牌改版时要大面积覆盖。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| Svelte 5 原生 | 基于 runes 重写，契合新版响应式模型 |
| 无样式原语 | 只给结构与行为，外观由你的样式方案决定 |
| 覆盖全面 | 对话框、下拉、滑块等常见组件一应俱全 |
| 无障碍内置 | 键盘与 aria 按规范处理，省去自测成本 |
| 组合式设计 | 零件可拆可合，按需拼装不臃肿 |
| 开源可查 | 源码公开，出问题可翻实现定位 |
它是 Svelte 5 时代的一站式无样式方案
Bits UI 把「无样式」做到位：每个组件只交付语义化的结构与完整交互（开合、聚焦顺序、键盘操作），不带任何预设视觉。你用 Tailwind、原生 CSS 还是别的都行。相比零散的 builder 库，它的优势是覆盖广——常见界面组件基本一整套给齐，少了很多东拼西凑。
它依赖 Svelte 5 的 runes，所以老项目要先用新版。它是通过 npm 安装的库，不是复制源码；升级跟随依赖。因为只管行为不管长相，初上手要自己把视觉系统搭起来，适合愿意投入设计、追求一致体验的团队。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Melt UI | 开源免费 | Svelte 的 headless 原语，用 action 挂载行为。 |
| Flowbite Svelte | 开源免费 | 带样式的 Svelte 组件，开箱即用但定制要覆盖。 |
| Ark UI | 开源免费 | 多框架 headless，含 Solid/Vue，Svelte 在跟进。 |
谁适合用
- 已迁移或新建 Svelte 5 项目的前端团队
- 想要无样式组件、自己掌控视觉的开发者
- 需要一套齐全且无障碍就绪的原语的项目
怎么开始
- 确认项目已使用 Svelte 5 与对应构建工具。
- 用包管理器安装 bits-ui。
- 从文档引入需要的组件，拷进自己的页面。
- 用自有样式方案覆盖外观与品牌。
- 走查键盘与屏幕阅读器表现后再上线。
常见问题
依赖 Tailwind 吗？
不依赖。它无样式，配 Tailwind 或普通 CSS 都行。
是装库还是复制源码？
是装库，通过 npm 引入，跟随依赖升级。
支持 Svelte 4 吗？
不支持，它面向 Svelte 5 的 runes 模型重写。
能商用吗？
能。以开源协议发布，可自由用于商业项目。
授权与合规
Bits UI 以开源协议发布，源码公开，可自由用于商业与个人项目。 官网：bits-ui.com。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
