2024 年值得尝试的 10 多个 Svelte UI 库

无头 Svelte 库

Svelte是一个开源的 JavaScript 框架，因其快速的客户端性能（相比 React 和 Vue）、轻量级特性和易于学习的特点，在 Web 开发人员中广受欢迎。Svelte 与 SvelteKit 结合使用，能够显著提高 Web 开发人员的效率，让他们更快地构建项目，编写更易于理解和修复的代码，并真正享受“快乐编码”的乐趣。

随着 Svelte 社区每年稳步发展，越来越多的 UI 库涌现出来，这也得益于 Svelte 代码易于转换为现成组件的特性。如果您是一位经验丰富的 Svelte 开发者，本文可能不会给您带来任何新信息（当然，谁也说不准）。但如果您刚刚开始使用 Svelte 框架，或者正在考虑尝试，不妨看看这份 UI 库列表。或许其中就有您心仪的库。

骨骼

Skeleton是 Svelte 最流行的 UI 库之一。它基于 Svelte 构建，并使用 Tailwind CSS 来设置组件样式。Skeleton 与 Svelte 生态系统直接集成，包括组件、store 和 actions。它提供了一个易于使用的 CLI 选项，可以快速生成 Skeleton 项目。

它内置了许多美观的皮肤，还配备了主题生成器工具，方便用户轻松创建主题。总的来说，所有组件都具有很高的可定制性和可扩展性。该工具包正在持续开发中，并拥有一个活跃的社区。团队正在准备一次重大更新，预计将于今年晚些时候发布。

GitHub：4.6k ⭐
许可证：MIT

Flowbite Svelte

Flowbite Svelte是一个开源的 UI 库，它使用 Svelte 组件和 Tailwind CSS 构建。它提供了超过 58 个基于 Svelte 和Flowbite 的UI 组件和交互元素。该库拥有条理清晰的文档，其中包含代码示例，并可预览组件在桌面、平板电脑和智能手机等不同尺寸下的响应式显示效果。您还可以切换浅色/深色模式和文本方向（从右到左/从左到右）。代码简洁明了，组件样式也十分美观。

GitHub：1.9k ⭐
许可证：MIT

Svelte Material UI

Svelte Material UI是 Svelte 最古老的组件库之一，它提供了一系列基于 Google Material Design 的 UI 组件。该库还为各种界面元素提供了操作，并提供了用于构建自定义和高级 UI 组件的辅助工具。该库的特殊之处在于，您需要单独安装每个组件。主题化可以通过 Sass 或 CSS 变量来实现。

GitHub：3.2k ⭐
许可证：Apache 2.0

碳成分

Carbon Components是一个基于IBM 开源设计系统Carbon Design System的 Svelte 组件库。这些组件外观非常简约（尤其是基于灰色饱和度的样式），但可能更适合一些商业应用。不过，必须承认，该库提供了大量具有高级功能的 Svelte 组件。

GitHub：2.6k ⭐
许可证：Apache 2.0

SvelteUI

SvelteUI包含 50 多个可定制且易于使用的 Svelte 组件。这些组件使用 TypeScript 构建，并默认支持 TypeScript。除了组件之外，该库还包含开箱即用的操作、过渡效果和实用工具。总的来说，这是一个外观精美的库，其设计深受Mantine的影响，并拥有完善的文档。最近一次重大更新发布于 2023 年 8 月。

GitHub：1.2k ⭐
许可证：MIT

SVAR Svelte Core

SVAR Svelte Core提供了一系列常用的表单控件、弹出窗口、日期选择器、菜单和其他 UI 元素，可以组合成简洁美观的应用程序界面。除了 Core 库之外，SVAR 还提供功能丰富的Svelte DataGrid、甘特图和文件管理器组件，专为企业级应用程序量身定制。

GitHub：230 ⭐
许可证：MIT

景点

Attractions是一个基于 Svelte 的 UI 工具包，包含 49 个组件和一系列辅助函数。它使用Sass进行样式设计。虽然 Attractions 工具包看起来很有潜力，组件也确实很漂亮，但目前它的维护并不积极，未来发展也充满不确定性。

GitHub：1k ⭐
许可证：MIT

STW UI

STW UI是另一个基于 Svelte 和 Tailwind CSS 构建的组件库。它提供了 40 多个 Svelte 组件，以及旨在加速 Web 开发流程的操作和实用工具。凭借完善的文档和示例，它绝对值得一看。

GitHub：460 ⭐
许可证：MIT

无头 Svelte 库

无头库只提供底层 API，负责逻辑和可访问性原则，同时让您可以完全掌控界面的外观和风格。您可以使用自定义样式来使组件呈现您想要的外观。

Melt UI

Melt UI是功能最强大、最完整的 Svelte 无头组件库。它提供了一系列无头、易用的组件构建器，这些构建器高度可定制且灵活。构建器本质上是生成属性集合的函数，这些属性集合可以应用于任何 UI 元素。

该库面向各种规模的项目，从小型业余项目到更高级的 Web 界面均可胜任。它允许您构建自己的组件，并使用自定义 CSS、CSS 预处理器或 CSS-in-JS 库对其进行样式设置。Melt UI 附带详细的文档，其中包含多个演示（使用 Tailwind 样式）和代码示例。您可以使用 CLI 命令快速安装该库。

GitHub：2.9k ⭐
许可证：MIT

Bits UI

Bits UI是一套基于 Melt UI 构建的无头组件基元集合。Bits UI 的无头组件完全可定制、易于访问，并且默认未预设样式。您可以使用 CSS 类、CSS 框架（例如 TailwindCSS 或 UnoCSS）、数据属性或全局类来设置组件的外观。专业美观的文档包含预览演示，展示简单的代码示例，以及全面的 API 参考。

GitHub：822 ⭐
许可证：MIT

shadcn-svelte

shadcn-svelte是shadcn/ui的非官方 Svelte 移植版。它是一系列可重用组件的集合，您可以复制粘贴或使用命令行界面 (CLI) 将其添加到您的 Svelte 应用中。它没有软件包，也没有任何依赖项。您只需选择所需的组件并根据自身需求进行自定义即可。您可以将 shadcn-svelte 作为参考来构建自己的组件库。

组件代码包含 Bits UI 组件和默认的 Tailwind CSS 样式，您可以根据自己的喜好进行更改。此外，还有一些预定义主题，您可以使用简洁的主题构建器进行自定义。我们还提供 Figma 设计工具包。

GitHub：4k ⭐
许可证：MIT

Svelte 无头 UI

Svelte Headless UI是一个非官方的、完整的 Svelte 移植版Headless UI组件库。它能帮助你处理所有逻辑细节（键盘和鼠标交互、辅助功能、焦点管理等等），同时让你能够自由地自定义组件样式。虽然该库与 Tailwind CSS 无缝集成以进行样式设置，但这并非强制要求，而且该库本身并非 Tailwind 专属。

GitHub：1.8k ⭐
许可证：MIT

探索这些 Svelte UI 库，您将获得一系列解决方案，从而简化您的 Svelte 项目。无论您是选择提供预设计 UI 元素的组件库，还是利用无头模式以获得最大的灵活性，您都可以享受到 Svelte 生态系统的简洁性和无与伦比的性能。探索、尝试，找到最适合您下一个项目的方案！

封面照片由Ferenc Almasi拍摄，来自Unsplash。