Svelte is an open source JavaScript framework which gains popularity among web developers due to its fast client performance (compared to React and Vue), lightweight nature and ease of learning. Svelte, together with SvelteKit, makes web developers more productive allowing them to build projects faster, write code that is easier to understand and fix, and simply "code with joy".
As Svelte community is growing slightly with each year, more and more UI libraries appear, which is also facilitated by the ease of converting Svelte code into ready-made components. If you're a seasoned Svelte developer, there probably won't be anything new for you in this article (although you never know). But if you're just starting or considering your journey with Svelte framework, take a look at this list of UI libraries. There might be one which will become your favorite.
Skeleton
Skeleton is one of the most popular UI libraries for Svelte. It is built on top of Svelte and uses Tailwind CSS for styling the components appearance. Skeleton integrates directly with Svelte ecosystem, including components, stores and actions. It provides an easy-to-use CLI option to quickly generate a Skeleton project.
It comes with a number of visually appealing built-in skins and also a theme generator tool for easy theme creation. In general, all the components are very customizable and extendable. The toolkit is continuously developing and has an active community. The team is preparing a major update which will hopefully be available later this year.
GitHub: 4.6k ⭐
License: MIT
Flowbite Svelte
Flowbite Svelte is an open-source UI library built with Svelte components and Tailwind CSS. It provides over 58 UI components and interactive elements built with Svelte and Flowbite. It comes with well-organized documentation, where you can see the code sample and preview the components for responsive sizes: desktop, tablet and smartphone. You can also switch light/dark modes and RTL/LTR text direction. The code looks quite straightforward and the components are styled very neat.
GitHub: 1.9k ⭐
License: MIT
Svelte Material UI
Svelte Material UI is one of the oldest libraries for Svelte and it offers a decent collection of UI components with Google-inspired Material Design. This library also provides actions for a wide variety of interface elements and helper utilities for building custom and advanced UI components. The specialty of this library is that you need to install each component separately. Theming is done with Sass or with CSS variables.
GitHub: 3.2k ⭐
License: Apache 2.0
Carbon Components
Carbon Components is a Svelte component library that is built on top of the Carbon Design System, an open source design system by IBM. The components look very minimalistic (especially styling based on gray color saturation) but probably would fit in some business-looking app. In defense it must be said that the library offers a big number of Svelte components with advanced functionality.
GitHub: 2.6k ⭐
License: Apache 2.0
SvelteUI
SvelteUI includes 50+ customizable, accessible Svelte components. The components are built with TypeScript and support it by default. In addition to the components, the library includes out-of-the-box actions, transitions, and utilities. In general, it's a nice-looking library, heavily inspired by Mantine, with good documentation. The latest major update was released in August 2023.
GitHub: 1.2k ⭐
License: MIT
Attractions
Attractions is a UI kit for Svelte that includes 49 components and a collection of helper functions. It uses Sass for styling. Although the Attractions kit seems promising and the components look really nice, it's not very actively supported right now and its future is uncertain.
GitHub: 1k ⭐
License: MIT
STW UI
STW UI is another component library built with Svelte and Tailwind CSS. It provides more than 40 Svelte components, and also actions and utilities aimed to speed up the web development process. With well-crafted documentation and examples, it's definitely worth looking at.
GitHub: 427 ⭐
License: MIT
SVAR Svelte Core
SVAR Core is a new player on the Svelte arena but it provides quite a good selection of mostly-used form controls and other UI elements that can be combined into a sleek-looking app interface. In addition to the free open-source Core library, SVAR offers feature-rich Svelte DataGrid, Gantt chart and File Manager components tailored for enterprise-grade apps.
GitHub: 5 ⭐
License: MIT for Core, paid with free trial for DataGrid, Gantt, File Manager.
Headless Svelte Libraries
Headless libraries give you only the lower level API, providing the logic and accessibility principles while you stay in control of how the interface will look and feel. You can use your own styling to make the components look the way you need.
Melt UI
Melt UI is the most powerful and complete headless library for Svelte. It offers a set of headless, accessible component builders, very customizable and flexible. Builders are just functions that generate a collection of properties that can be applied to any UI element.
The library is aimed at different scales of projects, from small hobby projects to more advanced web interfaces. It allows you to build your own components and style them with your custom CSS, CSS preprocessors, or CSS-in-JS libraries. Melt UI comes with detailed documentation that includes multiple demos (styled with Tailwind) and code samples. The library can be quickly installed using CLI command.
GitHub: 2.9k ⭐
License: MIT
Bits UI
Bits UI is a collection of headless component primitives built on top of Melt UI. The headless components of Bits UI are completely customizable, accessible and come unstyled. To make the components look the way you need, you can use CSS classes, CSS framework (like TailwindCSS or UnoCSS), data attributes or global classes. The professionally-looking documentation includes preview demos showcasing simple code samples, along with comprehensive API references.
GitHub: 822 ⭐
License: MIT
shadcn-svelte
shadcn-svelte is an unofficial Svelte port of shadcn/ui. It's a collection of reusable components that you can copy and paste or use the CLI to add to your Svelte apps. There is no package, no dependencies. You just choose the components you need and customize them to your needs. You can use shadcn-svelte as a reference to build your own component libraries.
The component code consists of Bits UI components and default CSS Tailwind style, which you can change to your own preferences. There are also some predefined themes which you can customize in a neat theme builder. Design kit for Figma is available.
GitHub: 4k ⭐
License: MIT
Svelte Headless UI
Svelte Headless UI is an unofficial, complete Svelte port of the Headless UI component library. It helps you to handle all logic details (keyboard and mouse interactions, accessibility, focus management, and more) while you have the freedom to style the components however you like. While this library seamlessly integrates with Tailwind CSS for styling, it's optional and the library itself is not Tailwind-specific.
GitHub: 1.8k ⭐
License: MIT
Exploring these Svelte UI libraries offers you an array of solutions to streamline your Svelte projects. Whether opting for component libraries offering pre-designed UI elements or leveraging headless options for maximum flexibility, you can enjoy the simplicity and unbeatable performance of Svelte ecosystem. Explore, experiment, and discover the perfect fit for your next project!
Cover photo by Ferenc Almasi on Unsplash
Top comments (0)