10+ UI Libraries for Svelte to Try in 2024

This page summarizes the projects mentioned and recommended in the original post on dev.to

Civic Auth - Auth in Less Than 5 Minutes
Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.
www.civic.com
featured
SurveyJS - JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor
Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
surveyjs.io
featured
  1. svelte-material-ui

    Svelte Material UI Components

    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.

  2. Civic Auth

    Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

    Civic Auth logo
  3. carbon-components-svelte

    Svelte implementation of the Carbon Design System

    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.

  4. attractions

    Discontinued [DEPRECATED, see readme] A pretty cool UI kit for Svelte

    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.

  5. stwui

    Opinionated yet customizable Svelte-TailwindCSS component library

    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.

  6. melt-ui

    A set of headless, accessible component builders for Svelte.

    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.

  7. skeleton

    Skeleton is an adaptive design system powered by Tailwind CSS. (by skeletonlabs)

    GitHub: 4.6k stars License: MIT

  8. carbon

    A design system built by IBM (by carbon-design-system)

    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.

  9. SurveyJS

    JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

    SurveyJS logo
  10. flowbite-svelte

    Official Svelte components built for Flowbite and Tailwind CSS

    GitHub: 1.9k stars License: MIT

  11. shadcn/ui

    A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

    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.

  12. Svelte

    web development for the rest of us

    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".

  13. svelteui

    SvelteUI Monorepo

    GitHub: 1.2k stars License: MIT

  14. SVAR Svelte Core

    SVAR Core library offers a collection of Svelte form controls and UI components. (by svar-widgets)

    GitHub: 5 stars License: MIT for Core, paid with free trial for DataGrid, Gantt, File Manager.

  15. bits-ui

    The headless components for Svelte.

    GitHub: 822 stars License: MIT

  16. shadcn-svelte

    shadcn/ui, but for Svelte. ✨

    GitHub: 4k stars License: MIT

  17. svelte-headlessui

    Unofficial Svelte port of the Headless UI component library

    GitHub: 1.8k stars License: MIT

  18. Sass

    Sass makes CSS fun!

    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.

  19. mantine

    A fully featured React components library

    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.

  20. flowbite

    Open-source UI component library and front-end development framework based on Tailwind CSS

    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.

  21. InfluxDB

    InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Flowbite Svelte - Open-source Svelte UI component library [MIT License]

    1 project | /r/opensource | 30 Apr 2023
  • Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS [MIT License]

    1 project | /r/coolgithubprojects | 30 Apr 2023
  • Flowbite-Svelte website update

    1 project | /r/sveltejs | 20 Apr 2023
  • Help with tabs component

    3 projects | /r/sveltejs | 27 Feb 2023
  • What component libraries are available

    4 projects | /r/sveltejs | 15 Nov 2022